jsonp跨域请求

最新推荐文章于 2023-06-09 19:24:23 发布

前端宇宙

最新推荐文章于 2023-06-09 19:24:23 发布

阅读量114

点赞数

分类专栏： js 文章标签： js jsonp ajax javascript jquery

本文链接：https://blog.csdn.net/qq_36788686/article/details/118442716

版权

js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="tit"></div>
<ul id="item"></ul>

<script src="http://img.wulicdn.com/js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/juicer-min.js" ></script>
<script id="ti" type="text/template">
<p>id：${data.aQipuId}</p>
<p>公告：${data.ps}</p>
</script>
<script id="tpl" type="text/template">
{@each data as item}
<li>
<p>标题:${item.shortTitle}</p>
<p><img src="${item.vpic}" /></p>

<p>描述：${item.vt}</p>
<p>点击观看： <a href="${item.vurl}" target="_blank">${item.vurl}</a></p>
</li>
{@/each}
</script>

<script>
$(document).ready(function(){
$.ajax({
type:"post",
url:"http://cache.video.iqiyi.com/jp/avlist/202861101/1/?callback=jsonp9",
data:{
},
dataType:'jsonp', //跨域json请求一定是jsonp
     jsonp: 'callback',//将callback写在jsonp里作为参数连同请求一起发送
     jsonpCallback:'jsonp9',
async:true,
success:function(data){
console.log(data.data)
var obj = data.data;
var list = data.data.vlist;
var _html = juicer(document.getElementById("ti").innerHTML,{
data:obj
})
var _html2 = juicer(document.getElementById("tpl").innerHTML,{
data:list
})
$("#tit").html(_html);
$("#item").html(_html2);

},
error:function(err){
console.log(err);
}
});
})
</script>
</body>
</html>

以下是截图：
在这里插入图片描述

前端宇宙

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
jsonp跨域请求

<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body><div id="tit"></div><ul id="item"></ul><script src="http://img.wulicdn.com/js/jquery-1.9.1.min
复制链接

扫一扫