php通过ajax获取跨域的信息(art-templata)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>豆瓣的小东西</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
</head>
<body>
<div class="page-header">
<h1>豆瓣最新电影 <small>«Let'me see</small></h1>
</div>
<div class="container">
<h3>正在热映 <span class="label label-danger">Hot</span></h3>
<br>
<div class="row">
<!-- <div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="/fileimg-5e71a93db4cec.jpg" alt="...">
<div class="caption">
<h3>Thumbnail label</h3>
<p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
</div>
</div>
</div> -->
</div>
</div>
</body>
<script id="data" type="text/x-art-template" >
{{each subjects }}
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="{{$value.images}}" alt="...">
<div class="caption">
<h4>{{$value.title}}</h4>
<p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
</div>
</div>
</div>
{{/each}}
</script>
<script src="/jquery/jquery.js"></script>
<script src="/jquery/template-web.js"></script>
<script>
$.ajax({
url:'https://douban.uieee.com/v2/movie/in_theaters',
//设置参数
data:{},
dataType:'jsonp', //这个是设置请求体的类型
type:'get',
success:function(res){
console.log(res.subjects)
// var data = {comments : res}
var html = template('data',res)
$('.row').html(html)
}
})
</script>
</html>
将数据挂载到模板中去
//res 是跨域返回的数据 data是模板的id名
var html = template('data',res)
将数据添加到dom中
//res 是跨域返回的数据 data是模板的id名
$('.row').html(html)
模板内容
跨域接口返回来的数据 转成了json
循环的是res 中的 subjects数组。res是一个大的对象,里面有一个叫subjects的数组
$value是指当前数组
{{each subjects }}
<div class="col-sm-6 col-md-3">
<div class="thumbnail">
<img src="{{$value.images}}" alt="...">
<div class="caption">
<h4>{{$value.title}}</h4>
<p><a href="#" class="btn btn-primary" role="button">查看详情</a></p>
</div>
</div>
</div>
{{/each}}