jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域
<!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><!--参考教程/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: "/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>复制代码
