在开发过程中,我们向服务端发送请求,一般会使用三种方式, XMLHttpRequest(XHR)，Fetch ，jQuery实现的AJAX。
其中, XMLHttpRequest(XHR)和Fetch是浏览器的原生API，jquery的ajax其实是封装了XHR。
Fetch API是基于Promise设计，旧浏览器不支持Promise，需要使用pollyfill
说明：
a. fetch api返回的是一个promise对象
b.Options:
- method(String): HTTP请求方法，默认为
GET - body(String): HTTP的请求参数
- headers(Object): HTTP的请求头，默认为{}
- credentials(String): 默认为
omit,忽略的意思，也就是不带cookie;还有两个参数，same-origin，意思就是同源请求带cookie；include,表示无论跨域还是同源请求都会带cookie
<iframe id="tmp_downloadhelper_iframe" style="display: none;"></iframe>
c.第一个then函数里面处理的是response的格式，这里的response具体如下：
- status(number): HTTP返回的状态码，范围在100-599之间
- statusText(String): 服务器返回的状态文字描述，例如
Unauthorized,上图中返回的是Ok - ok(Boolean): 如果状态码是以2开头的，则为true
- headers: HTTP请求返回头
- body: 返回体，这里有处理返回体的一些方法
- text(): 将返回体处理成字符串类型
- json()： 返回结果和 JSON.parse(responseText)一样
- blob()： 返回一个Blob，Blob对象是一个不可更改的类文件的二进制数据
- arrayBuffer()
- formData()
image.png
测试代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>fetch</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">正在热映</button>
<ul>
<li v-for="data in datalist">
<img :src="data.poster"/>
<h3>{{data.name}}</h3>
<p>{{data.synopsis}}</p>
<ul>
<li v-for="item in data.actors">
<img :src="item.avatarAddress"/>
<h4>{{item.name}}</h4>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick(){
fetch("json/test.json").then(result=>result.json()).then(res=>{
console.log(res);
this.datalist =res.data.films
})
//post-1
// fetch("json/test.json",{
// method:"post",
// headers:{
// "Content‐Type": "application/x‐www‐form‐urlencoded"
// },
// credentials: 'include',
// body:"name=kerwin&age=100"
// }).then(res=>res.json()).then(res=>{
// console.log(res);
// })
//post -2
// fetch("json/test.json",{
// method:"post",
// headers:{
// "Content‐Type": "application/json"
// },
// body:JSON.stringify({
// name:"kerwin",
// age:100
// })
// }).then(res=>res.json()).then(res=>{
// console.log(res);
// })
}
}
})
</script>
</body>
</html>
数据json文件：
{
"status": 0,
"data":
{
"films": [
{
"filmId": 4567,
"name": "波西米亚狂想曲",
"poster": "https://pic.maizuo.com/usr/movie/13acbd020f39eeca87d03c620120954b.jpg",
"actors": [
{
"name": "布莱恩·辛格 ",
"role": "导演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/006b1f4ac19e7b7d7dfa233a4b2276a8.jpg"
},
{
"name": "约瑟夫·梅泽罗",
"role": "John Deacon",
"avatarAddress": "https://pic.maizuo.com/usr/movie/6ab3766b4765cfa828c44aa57e9de76b.jpg"
},
{
"name": "拉米·马雷克",
"role": " Freddie",
"avatarAddress": "https://pic.maizuo.com/usr/movie/f70e6cc421fb793604f4c3cb0f3a1e18.jpg"
},
{
"name": "本·哈迪",
"role": " Roger Taylor ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/7a9ba02d40e070438d48e942d2535ea7.jpg"
}],
"director": "布莱恩·辛格",
"category": "剧情|音乐|传记",
"synopsis": "本片是对皇后乐队、传奇主唱弗雷迪·莫库里以及他们音乐的致敬盛宴，这是一段充满爱、痛苦、接纳和音乐的旅程。 弗雷迪·莫库里（拉米·马雷克 饰）曾是希思罗机场的一名普通搬运工，对音乐满腔热血的他，与布莱恩·梅（格威利姆·李 饰）、罗杰·泰勒（本·哈迪 饰）、约 翰·迪肯（约瑟夫·梅泽罗 饰）组成皇后乐队。这个殿堂级乐队的从无到有，从疏离到重聚，从低谷到巅峰，仿佛就是弗雷迪一生的缩影。在最后的日子里，弗雷迪做了生命中最重要的决定——在音乐史上最伟大的“拯救生命”大型摇滚乐演唱会上，将所有热血付诸于歌声。",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "英国 美国",
"language": "英语",
"videoId": "XMzcyODg2MDAzNg==",
"premiereAt": 1553212800,
"timeType": 3,
"runtime": 135,
"grade": "8.6",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4566,
"name": "地久天长",
"poster": "https://pic.maizuo.com/usr/movie/544ae35bd95772d6b295b4c31af55131.jpg",
"actors": [
{
"name": "王景春",
"role": "刘耀军",
"avatarAddress": "https://pic.maizuo.com/usr/movie/3dc888f126aa09eb029c574ec4aa3277.jpg"
},
{
"name": "咏梅 ",
"role": " 王丽云",
"avatarAddress": "https://pic.maizuo.com/usr/movie/a93cf57cd306994db0b0e1a60082bae4.jpg"
},
{
"name": "齐溪",
"role": "沈茉莉 ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/096335268664820e48ad41d2a73e4114.jpg"
},
{
"name": "杜江",
"role": " 沈浩",
"avatarAddress": "https://pic.maizuo.com/usr/movie/df1fa774ef74a2481051e55a3101bb8d.jpg"
},
{
"name": "王源 ",
"role": "刘星",
"avatarAddress": "https://pic.maizuo.com/usr/movie/be41e58fd97a3cc279f9cbc8c86b7ae7.jpg"
}],
"director": "王小帅",
"category": "剧情|家庭",
"synopsis": "影片讲述患难与共的两个家庭因为一场有隐情的意外被迫疏远，他们在时代洪流下历尽伤痛与不安，人生起伏跌宕，最终选择面对真相，坦荡向前的故事。 年轻的刘耀军和沈英明两家人本是挚友，两家儿子沈浩和刘星在郊外嬉戏中，耀军的儿子刘星意外身亡，此事彻底改变了两家人的命运。刘家夫妇远赴南方。多年后，容颜已老的他们再次相聚，隐藏的真相终将因为年轻一代人的坦荡而揭开。岁月流逝，生命滚滚向前……",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "中国大陆",
"language": "汉语普通话",
"videoId": "",
"premiereAt": 1553212800,
"timeType": 3,
"runtime": 175,
"grade": "7.9",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4480,
"name": "老师·好",
"poster": "https://pic.maizuo.com/usr/movie/85f4fc27c6b90d7e84295e115837728b.jpg",
"actors": [
{
"name": "于谦 ",
"role": "苗宛秋",
"avatarAddress": "https://pic.maizuo.com/usr/movie/51eda8cf5f7fb2d29edd5f6fcc0ac1cb.jpg"
},
{
"name": "汤梦佳",
"role": " 演员",
"avatarAddress": "https://pic.maizuo.com/usr/movie/dd42533278f342136ccce2b6d651a5e4.jpg"
},
{
"name": "秦鸣悦 ",
"role": " 关婷婷 ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/273e6c2dbdec02af36ccabf6b55a75eb.jpg"
},
{
"name": "王广源 ",
"role": " 洛小乙 ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/41577fcbf7511dbc8c6432d380674dd2.jpg"
},
{
"name": "孙艺杨 ",
"role": "演员",
"avatarAddress": "https://pic.maizuo.com/usr/movie/240fcd0be7f7e51a82f52dbdb74991b3.jpg"
}],
"director": "张栾",
"category": "剧情",
"synopsis": "1985年的南宿一中，苗宛秋老师推自行车昂首走在校园，接受着人们艳羡的目光和纷至沓来的恭维。桀傲不驯的洛小乙、温婉可人的安静、新潮前卫的关婷婷、大智若愚的脑袋、舞痴兄弟文明建设、八婆海燕、奸商耗子……三班是一个永远也不缺故事的集体。苗宛秋怎么也不会想到，他即将走进的这个三班将会成为他以及他身边这辆自行车的噩梦。三班的同学也没有想到，这位新来的老师改变了他们的一生。",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "中国大陆",
"language": "汉语普通话",
"videoId": "XMzkxNjYwMzY3Mg==",
"premiereAt": 1553212800,
"timeType": 3,
"runtime": 100,
"grade": "7",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4582,
"name": "调音师",
"poster": "https://pic.maizuo.com/usr/movie/7cfc6dce2e2f130db2fc28153b370dc9.jpg",
"actors": [
{
"name": "阿尤斯曼·库拉纳 ",
"role": "Akash",
"avatarAddress": "https://pic.maizuo.com/usr/movie/337206f555b3800966fe29888b32bb66.jpg"
},
{
"name": "拉迪卡·艾普特",
"role": "Sofie",
"avatarAddress": "https://pic.maizuo.com/usr/movie/63747b6c084b68eb13cdd2f13e628e38.jpg"
},
{
"name": "塔布",
"role": "Simi",
"avatarAddress": "https://pic.maizuo.com/usr/movie/4b98d699897e2d111c820e4c4ea8da75.jpg"
},
{
"name": "安尔·德霍万",
"role": " Pramod Sinha",
"avatarAddress": "https://pic.maizuo.com/usr/movie/d774014805cb601d996828c881ce05e4.jpg"
}],
"director": "斯里兰姆·拉格万",
"category": "喜剧|悬疑|犯罪",
"synopsis": "印度影片《调音师》改编自2010年的同名法国高分悬疑短片。故事讲述了一直假装盲人的钢琴调音师阿卡什（Akash），在意外成为一起凶杀案的唯一“目击证人”后，所遭遇的种种出其不意的经历。影片故事波折惊奇，反转不断，是2018年度IMDb评分最高的印度影片。",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "印度",
"language": "印地语",
"videoId": "",
"premiereAt": 1554249600,
"timeType": 3,
"runtime": 139,
"grade": "8.3",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4538,
"name": "风中有朵雨做的云",
"poster": "https://pic.maizuo.com/usr/movie/227ffe3aa02f6a503c94e6674c47d1b9.jpg",
"actors": [
{
"name": "娄烨 ",
"role": "导演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/28ad9132e62874306247d10706dcc4b2.jpg"
},
{
"name": "井柏然 ",
"role": "杨家栋",
"avatarAddress": "https://pic.maizuo.com/usr/movie/8714476c5752b503a7e64fd5f8b666eb.jpg"
},
{
"name": "马思纯",
"role": "唐小诺",
"avatarAddress": "https://pic.maizuo.com/usr/movie/a5abdd400c48ebc14fa0e8b83a1e6519.jpg"
},
{
"name": "秦昊 ",
"role": " 姜紫成",
"avatarAddress": "https://pic.maizuo.com/usr/movie/bf117d826959590b03a6c313b4e020e0.jpg"
},
{
"name": "陈妍希",
"role": "连阿云",
"avatarAddress": "https://pic.maizuo.com/usr/movie/ffcd81b307b44f84ad4c67697c318c0b.jpg"
},
{
"name": "宋佳",
"role": "林慧",
"avatarAddress": "https://pic.maizuo.com/usr/movie/b334718b470a70fdaa48f44ccc00fa6b.jpg"
}],
"director": "娄烨",
"category": "剧情|悬疑|犯罪",
"synopsis": "沿海小城，年轻警官杨家栋（井柏然 饰）初来乍到，恰遇城建委主任唐奕杰（张颂文 饰）坠楼身亡。杨家栋遂展开调查，发现唐奕杰坠楼案与和他过从甚密的紫金企业 负责人姜紫成（秦昊 饰），还有几年前紫金企业合伙人阿云（陈妍希 饰）失踪案都有着密切的关系。杨家栋调查中惨遭革职、追杀，一路逃往香港，途中与死者女儿小诺（马思纯 饰）意外邂逅，并在小诺的协助下继续追查，浑然不觉自己正落入一个纯情陷阱……",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "中国大陆",
"language": " 汉语普通话",
"videoId": "XMzkyMTgzNzkxNg==",
"premiereAt": 1554336000,
"timeType": 3,
"runtime": 129,
"grade": "7.6",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4571,
"name": "小飞象",
"poster": "https://pic.maizuo.com/usr/movie/3b5e3c05f558ff4edd12ffc2bd72fec1.jpg",
"actors": [
{
"name": "科林·法瑞尔",
"role": " 霍特·法瑞尔",
"avatarAddress": "https://pic.maizuo.com/usr/movie/5aa33e71a0afc81f1b1288fb5447c497.jpg"
},
{
"name": "伊娃·格林",
"role": "柯莱特·马钱特 ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/9adfd797720d21448b506149812ea22e.jpg"
},
{
"name": "迈克尔·基顿",
"role": "文德维尔",
"avatarAddress": "https://pic.maizuo.com/usr/movie/6df9123fffd963748c75a0dce3372d6f.jpg"
}],
"director": "蒂姆·波顿",
"category": "奇幻|冒险",
"synopsis": "迪士尼全新真人版《小飞象》改编自1941年推出的迪士尼同名经典动画，讲述了生来因一双大耳朵而遭人嘲笑的小飞象，在众人的帮助下逐渐拥抱自己的与众不同，成就一段逆风翱翔的暖心传奇。 一位前马戏团明星，刚从战争前线归来，霍特·法瑞尔(科林·法瑞尔饰)在一家艰难经营的马戏团谋得一份工作，负责照顾刚出生的小象，带着两个善良的孩子，女儿米莉·法瑞尔(尼科·帕克饰)和儿子乔·法瑞尔(芬利·霍宾斯饰)，两个孩子和另外一个女孩玛茜特(蔡慧泉饰)与小飞象成为朋友， 帮助小飞象找到妈妈。",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "美国",
"language": "英语",
"videoId": "XMzY2MjE1Njc4NA==",
"premiereAt": 1553817600,
"timeType": 3,
"runtime": 130,
"grade": "8",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4580,
"name": "海市蜃楼 ",
"poster": "https://pic.maizuo.com/usr/movie/d5e399dba2f9a5378407dc4cfe4e731d.jpg",
"actors": [
{
"name": "哈维尔·古铁雷斯",
"role": "Ángel Prieto",
"avatarAddress": "https://pic.maizuo.com/usr/movie/a21e0f05bb01556b5caa72e6d30efc1d.jpg"
},
{
"name": "阿德里亚娜·乌加特 ",
"role": " Vera Roy",
"avatarAddress": "https://pic.maizuo.com/usr/movie/014dee5ee6efaf786f4f4f52e894ecbb.jpg"
},
{
"name": " 奥里奥尔·保罗",
"role": "导演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/5b18af8ff6bbf7b873286c15e5686bd7.jpg"
},
{
"name": "奇诺·达林",
"role": " Inspector Leyra",
"avatarAddress": "https://pic.maizuo.com/usr/movie/c1ba2f59f666335b3529e15a0fe78d5d.jpg"
}],
"director": "奥里奥尔·保罗",
"category": "科幻|悬疑",
"synopsis": "《看不见的客人》导演、西班牙悬疑大师奥里奥尔·保罗新作悬念升级。25年前一个风暴将至的夜晚，小男孩尼克目睹了邻居杀妻的全过程，被凶手发现的他在逃跑途中被车撞死。尼克死去25年后，幸福的已婚妇女维拉（阿德丽安娜·尤加特 饰）搬进了尼克住过的这所房子。一场和25年前一样的风暴让两段时空交错，惊醒的维拉发现自己竟能与电视机里的尼克跨时空对话。维拉透过电视机试图挽救这个男孩的性命，却引发一系列连锁反应——女儿消失、丈夫和身边的人全都不再认识和相信自己。于是，维拉只能在风暴消失前有限的15小时里，与唯一相信她的莱拉警长（奇诺·达林饰）解开所有谜团…",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "西班牙",
"language": " 西班牙语",
"videoId": "XNDA5NDcwMzEwMA==",
"premiereAt": 1553731200,
"timeType": 3,
"runtime": 128,
"grade": "7.3",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4581,
"name": "雷霆沙赞！",
"poster": "https://pic.maizuo.com/usr/movie/a2d61d2ac9452a246cba2354162fcab9.jpg",
"actors": [
{
"name": "扎克瑞·莱维 ",
"role": "Shazam",
"avatarAddress": "https://pic.maizuo.com/usr/movie/c2d53d30380b1638460f491c3ea2405a.jpg"
},
{
"name": "马克·斯特朗 ",
"role": "Dr. Thaddeus Sivana",
"avatarAddress": "https://pic.maizuo.com/usr/movie/765db70038bca878750550e3262019e2.jpg"
},
{
"name": "米歇尔·博斯 ",
"role": "演员 ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/75be8f6973e7ffe91be800a2b9a4e082.jpg"
}],
"director": "大卫·F·桑德伯格",
"category": "动作|奇幻|冒险",
"synopsis": "每个人身体里都潜藏着一位超级英雄，只需要一点魔力便能将其释放。14岁的街头小混混比利·巴特森(亚瑟·安其饰)通过大喊“沙赞”这个词，就可以变身为成年超级英雄沙赞(扎克瑞·莱维饰)，这是一种来自于古老巫师的恩惠。如神一般的肌肉身体里，仍存有一颗孩子心，他开心地与超能力为伴。他能飞吗？他能X光透视吗？他能从手中射出闪电吗？他能不用再考试了吗？沙赞以孩子般轻率又鲁莽的方式，开始测试他的能力极限。但他需要尽快掌握这些力量，以对抗塞迪斯·希瓦纳博士控制的邪恶势力。",
"filmType":
{
"name": "3D",
"value": 2
},
"nation": "美国",
"language": "英语",
"videoId": "",
"premiereAt": 1554422400,
"timeType": 3,
"runtime": 132,
"grade": "7.9",
"item":
{
"name": "3D",
"type": 2
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4573,
"name": "反贪风暴4",
"poster": "https://pic.maizuo.com/usr/movie/91f5bcd51621c9d7f2da217b1c208c7b.jpg",
"actors": [
{
"name": "郑嘉颖",
"role": "程德明 ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/65aa4967ac74fb009f49ee368d11c806.jpg"
},
{
"name": " 古天乐",
"role": "陆志廉",
"avatarAddress": "https://pic.maizuo.com/usr/movie/16cb37aee5bb9aa595d3fdf2127d507f.jpg"
},
{
"name": "林峯 ",
"role": " 曹元元 ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/90f338a92b51553c5b52b64ca4306fba.jpg"
}],
"director": "林德禄",
"category": "动作|犯罪",
"synopsis": "廉政公署收到报案人廖雨萍（周秀娜饰）的实名举报，举报正在坐牢的富二代曹元元（林峯饰）涉嫌行贿监狱里的监督沈济全（谭耀文饰）以及惩教员，首席调查主任陆志廉（古天乐饰）决定深入虎穴，卧底狱中。在监狱里，被陆志廉送入监狱的前警司黄文彬（林家栋饰）以及曹元元两大帮派势成水火，陆志廉趁机接近曹元元取得信任。同时监狱外的廉政公署总调查主任程德明（郑嘉颖饰）、国内反贪局行动处处长洪亮（丁海峰饰）也陆港联手，通力合作，最终成功破获贪腐行贿大案。",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "香港 中国大陆",
"language": " 粤语 汉语普通话",
"videoId": "",
"premiereAt": 1554336000,
"timeType": 3,
"runtime": 100,
"grade": "7.5",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
},
{
"filmId": 4565,
"name": "比悲伤更悲伤的故事",
"poster": "https://pic.maizuo.com/usr/movie/61f497be0a190f86f8bfb092d430d0f1.jpg",
"actors": [
{
"name": "林孝谦 ",
"role": " 导演",
"avatarAddress": "https://pic.maizuo.com/usr/movie/2a0ab1b72a5498a95f6807195054d765.jpg"
},
{
"name": "张书豪 ",
"role": " 杨佑贤",
"avatarAddress": "https://pic.maizuo.com/usr/movie/b96b37f77d519fb628d51145825b784b.jpg"
},
{
"name": "陈意涵",
"role": "宋媛媛",
"avatarAddress": "https://pic.maizuo.com/usr/movie/6f631a01ae25c485d570c99128f0dd41.jpg"
},
{
"name": "刘以豪 ",
"role": "张哲凯 ",
"avatarAddress": "https://pic.maizuo.com/usr/movie/b8874d7e5718908355342226a50a3a95.jpg"
},
{
"name": "陈庭妮",
"role": "Cindy",
"avatarAddress": "https://pic.maizuo.com/usr/movie/237641023c141de5bbce4740e7adee6c.jpg"
}],
"director": "林孝谦",
"category": "爱情",
"synopsis": "唱片制作人张哲凯(刘以豪)和王牌作词人宋媛媛(陈意涵)相依为命，两人自幼身世坎坷只有彼此为伴，他们是亲人、是朋友，也彷佛是命中注定的另一半。父亲罹患遗传重症而被母亲抛弃的哲凯，深怕自己随时会发病不久人世，始终没有跨出友谊的界线对媛媛展露爱意。眼见哲凯的病情加重，他暗自决定用剩余的生命完成他们之间的终曲，再为媛媛找个可以托付一生的好男人。这时，事业有 成温柔体贴的医生(张书豪)适时的出现让他成为照顾媛媛的最佳人选，二人按部就班发展着关系。一切看似都在哲凯的计划下进行。然而，故事远比这里所写更要悲伤......",
"filmType":
{
"name": "2D",
"value": 1
},
"nation": "台湾",
"language": "汉语普通话",
"videoId": "",
"premiereAt": 1552521600,
"timeType": 3,
"runtime": 105,
"grade": "6",
"item":
{
"name": "2D",
"type": 1
},
"isPresale": true,
"isSale": false
}],
"total": 36
},
"msg": "ok"
}
axios
image.png
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>fetch</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script type="text/javascript" src="lib/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="box">
<button @click="handleClick()">正在热映</button>
<ul>
<li v-for="data in datalist">
<img :src="data.poster"/>
<h3>{{data.name}}</h3>
<p>{{data.synopsis}}</p>
<ul>
<li v-for="item in data.actors">
<img :src="item.avatarAddress"/>
<h4>{{item.name}}</h4>
</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
new Vue({
el:"#box",
data:{
datalist:[]
},
methods:{
handleClick(){
// axios.get("json/test.json").then(res=>{
// console.log(res.data);//真正的后端数据藏在res.data
// this.datalist= res.data.data.films
// })
axios({
url:"https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=1384809",
headers:{
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"154277371928424093566579"}',
'X-Host': 'mall.film-ticket.film.list'
}
}).then(res=>{
console.log(res.data);
this.datalist= res.data.data.films
})
}
}
})
//vue-resource 2.0 作者不再维护，极力推荐 axios
</script>
</body>
</html>
网友评论