jQuery ajax 结合vue 获取豆瓣api 数据 ,jsonp解决跨域jQueryajax结合vue获取豆瓣a

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>
		<!--参考教程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>