fetch
<!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>
axios
<!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>
Comments | NOTHING