jsonp - Newbie_小白

jsonp

    function getData() {
        $.ajax({
            url: 'http://v.juhe.cn/WNXG/city',
            type: 'get',
            data: {
                key: 'bffc09994a8c2ca50357582f2c327b3e'
            },
            timeout: 5000,
            dataType: 'jsonp',
            jsonp: "message",
            jsonpCallback: "message",
        });
    }
    function message(data) {
        console.log();
    }

Demo：

ajax.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0 ,user-scalable=no">
    <script src="js/jquery.min.js"></script>
    <script src="js/bscroll.min.js"></script>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        .border-1px {
            position: relative;
        }

        .border-1px:after {
            display: block;
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            border-top: 1px solid rgba(7, 17, 27, .1);
            content: ' ';
        }

        @media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
            .border-1px::after {
                -webkit-transform: scaleY(0.7);
                transform: scaleY(0.7);
            }
        }

        @media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
            .border-1px ::after {
                -webkit-transform: scaleY(0.5);
                transform: scaleY(0.5);
            }
        }
        .ellipsis-1{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;word-break:break-all}
        .ellipsis-1{-webkit-line-clamp:1}

        .wrap {
            margin: 50px;
            width: 300px;
            border: 1px #ccc solid;
            box-shadow: 0 0 5px #aaa;
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            overflow: hidden;
        }

        .wrap h3 {
            height: 60px;
            line-height: 60px;
            background: #9cc4f6;
            text-align: center;
            color: #fff;
        }

        .list-wrapper {
            height: 400px;
            overflow: hidden;
        }

        .list li dt,
        .list li dd {
            height: 30px;
            line-height: 30px;

        }

        .list li dt {
            padding-left: 10px;
            font-size: 18px;
            color: #333;
        }

        .list li dd {
            padding-left: 16px;
            font-size: 16px;
            color: #666;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div>
        <h3>遍历对象数据</h3>
        <div class="wrapper list-wrapper">
            <ul class="list content" id="list">
                <li class="border-1px">
                    <dl>
                        <dt class="">标题</dt>
                        <dd>数据1</dd>
                        <dd>数据2</dd>
                    </dl>
                </li>
                <li class="border-1px">
                    <dl>
                        <dt>标题</dt>
                        <dd>数据1</dd>
                        <dd>数据2</dd>
                    </dl>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
<script>
    getData();
    function getData() {
        $.ajax({
            url: 'http://apis.juhe.cn/webscan/?callback=?&domain=juhe.cn&key=e8653d8956536b7ee9fdc538be7bb707',
            type: 'get',
            async: true,
            data: {},
            timeout: 5000,
            dataType: 'jsonp',
            beforeSend: function (xhr) {
            },
            success: function (data) {
                if (data.reason == 'Successed!') {
                    console.log(data);
                    var result = data.result.data;
                    loadData(result);
                } else {
                    console.log('请求数据失败！');
                }
            },
            error: function (xhr, textStatus) {
            },
            complete: function () {

            }
        });
    }

    function loadData(data) {
        var em = $('#list');
        var a = [];
        for (var i in data) {
            if (i != 'loudong') {
                console.log(i);
                console.log(data[i]);
                var g = '<li class="border-1px">';
                g += '<dl>';
                g += '<dt class="ellipsis-1">' + i + '</dt>';
                g += '<dd class="ellipsis-1">' + data[i].msg + '</dd>';
                g += '</dl>';
                g += '</li>';
                a.push(g);
            }
        }
        em.html(a.join(''));
        var wrapper = document.querySelector('.wrapper')
        var scroll = new BScroll(wrapper);
    }
</script>
</html>

posted on 2017-08-17 17:13 Newbie_小白阅读(197) 评论(0) 编辑收藏举报