<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域</title>
<style type="text/css">
.a1{
margin: 5px auto;
text-align: center;
}
.a1 li{
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<!--参考教程https://blog.csdn.net/meikongggg/article/details/78653968-->
<div id="app">
<h1>以下电影</h1>
<ul class="a1">
<li v-for="movie in subjects">
<p><span>影片名字:</span><span v-text="movie.title" class="blueColor"></span></p>
<p><span>类型:</span><span v-text="movie.genres" class="blueColor"></span></p>
<p><img :src="movie.images.large"/></p>
<p><img :src="movie.casts[0].alt" /></p>
</li>
</ul>
</div>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var abc;
var vm = new Vue({
el: "#app",
data: {
msg: '你好hello',
subjects:{}
},
methods: {
getData() { //定义一个函数getData() , 里面放置$ajax方法
let self = this;
$.ajax({
type: "get",
dataType: 'jsonp',
url: "http://api.douban.com/v2/movie/top250",
success: function(data) {
// var abc = $.parseJSON(data); //后台返回的json数据需要转为对象
console.log(data);
abc = data;
self.msg = data;
self.subjects = data.subjects
}
});
}
},
created: function() {//vue的生命周期函数 , 里面执行函数getData()
this.getData();
}
});
</script>
</body>
</html>复制代码
jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
