今天学习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>