• 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>

     

  • 相关阅读:
    git 使用规范
    备忘 Sim联合Python仿真接口
    HMM 隐马尔可夫模型 MATLAB
    Smoothed Zscore Algorithm 数据异常点算法
    服务器部署备忘
    关于string的indexof方法的试验
    关于命令模式的一些理解
    关于字符串效率问题
    随记一下 关于域用户的AD验证
    关于异步委托的部分理解
  • 原文地址:https://www.cnblogs.com/theWayToAce/p/7382865.html
Copyright © 2020-2023  润新知