艾利百科--临沂网站制作,临沂网页设计,临沂微信公众号,兼容并蓄,开放共赢!

艾利百科

当前位置: 主页 > 网站制作 > jQuery/JS >

JSONP跨域调用豆瓣封装实例及art-template模板引擎应用

时间:2018-10-05 20:48来源:未知 作者:kunbeatable 点击:
!doctype html html head meta charset=utf-8 title无标题文档/title script src=images/art-template.js/script /head body div id=content/div script id=temp1 type=text/html h1{{dataTitle}}/h1 {{each filmName}} [{{$index}}] {{$value.id}} {{includ


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跨域调用及模板引擎</title>
<script src="art-template.js"></script>
</head>
 
<body>
<div id="content"></div>
<script id="temp1" type="text/html">
<h1>{{dataTitle}}</h1>
{{each filmName}}
[{{$index}}]
{{$value.id}}
{{include 'temp2' $value}}  //子模板temp2嵌套到temp1中
{{$value.genres}}
{{$value.title}}</br>
{{/each}}
</script>
<!--嵌套循环模板-->
<script id="temp2" type="text/html">
{{each casts}}
<{{$value.name}}>
{{/each}}
</script>
 
<script>
function jsonp(url,arg,fn){
//动态创建script标签,设置src属性
var srpt = document.createElement('script');
//srpt.src=''
  // url?callback=方法名&page=1&cout=10
 
//1.1拼接url中的参数
var queryString = ''  //这个变量保存参数 的字符串形式
for(var key in arg){
queryString +=key + '=' + arg[key] + '&';
}
 
//动态创建方法名
//随机生成字符
var funName = 'fun_' + Math.random().toString().substr(3)   //fun_0.1212
 
window[funName] = fn;
 
url += '?' + queryString
 
//1.2设置callback参数,并创建方法
url +='callback=' +funName;
 
srpt.src = url
 
//2、把得到的script标签添加到dom上去
document.body.appendChild(srpt)
}
 
//使用url:'',arg:{},callback
jsonp('https://api.douban.com/v2/movie/coming_soon',{start:0,count:10},function(data){
//console.log(data);
//console.log(data.subjects);
var context = {
dataTitle:data.title, 
filmName: data.subjects
}
//console.log(context.comments)
var html = template("temp1",context);
//console.log(html)
document.getElementById('content').innerHTML = html;
})
</script>
</body>
</html>

art-template.js下载地址:http://aui.github.io/art-template/zh-cn/docs/installation.html
 
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片