今天学习ajax跨域加载,先来一段代码,异步加载的链接是爱奇艺的开源,我直接拿来用作测试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style>
        *{margin:0;padding:0px;font-size: 12px;}
        a{text-decoration: none;}
        ul{list-style: none;}
        #box{width:500px;margin:20px auto;}
        .btn{display:block;width:50px;height:50px;margin:20px auto;line-height: 50px;text-align: center;border:1px #000 solid;color:#000;transition:.3s linear;}
        .btn:hover{background: #000;color:#fff;font-weight: bold;}
        #con{margin-top:20px;}
        #con li{line-height: 30px;text-align: center;}
    </style>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script>
        $(function(){
            $('.btn').on('click', function(){
                var result='';
                $.ajax({
                    url: "http://cache.video.iqiyi.com/jp/avlist/202861101/1/",
                    type: "GET",
                    dataType: "jsonp", //指定服务器返回的数据类型
                    jsonp: 'callback',                 //将callback写在jsonp里作为参数连同请求一起发送
                    jsonpCallback:'jsonpCallback',
                    success: function (data) {
                        //var result = JSON.stringify(data); //json对象转成字符串

                        picArr = data.data;
                        var vlist = picArr.vlist;//循环vlist数组可以做下拉加赞分页
                        console.log(vlist);

                        //console.log(result);
                        console.log(data);


                        var f = data["bmsg"]["f"];
                        var ps = data["data"]["ps"];

                        for (var i = 0; i < 10; i++){
                            result += '<li>'
                                +'<span>'+vlist[i].id+'</span>'
                                +'<span>'+vlist[i].shortTitle+'</span>'
                                +'<span>'+vlist[i].pds+'</span> <br>'
                                +'<span>'+vlist[i].plcdown["15"]+'</span>'
                                +'<span>'+vlist[i].plcdown["17"]+'</span>'
                                +'<span>'+vlist[i]["plcdown"]["15"]+'</span>'
                                +'</li>';
                        }

                        $("#con").html(result);
                    }
                });
                

            })
        })
    </script>
</head>
<body>
<div id="box">
    <a class="btn" href="javascript:;">点击</a>
    <ul id="con"></ul>
</div>
</body>
</html>
View Code

相关文章:

  • 2021-09-09
  • 2021-11-14
  • 2021-10-21
  • 2022-01-11
  • 2021-08-26
  • 2021-08-12
猜你喜欢
  • 2021-09-05
  • 2021-07-20
  • 2021-09-23
  • 2022-12-23
  • 2022-02-23
  • 2021-11-12
相关资源
相似解决方案