使用 vue-resource 、axios 等第三方包实现 Ajax请求。
vue-resource 目前已不再更新，推荐使用 axios.
下面仅为介绍学习 vue-resource的笔记。
1、Get、Post、Jsonp 请求
<script src="lib/vue-2.4.0.js"></script>
<script src="lib/vue-resource-1.3.4.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
list: []
},
methods: {
getInfo(){
this.$http.get("http://www.liulongbin.top:3005/api/getprodlist")
.then(function (res) {
console.log(res.body);
if (res.body.status === 0) {
this.list=res.body.message;
alert("成功："+JSON.stringify(res));
} else {
alert("失败：" + JSON.stringify(res));
}
})
},
postInfo(){
this.$http.post("http://jsonplaceholder.typicode.com/posts", {}, { emulateJSON: true }).then(result => {
console.log(result.body);
})
},
jsonpInfo(){
this.$http.jsonp("http://jsonplaceholder.typicode.com/users").then(result => {
console.log(result.body);
})
}
}
});
</script>
Get请求
注意：发送请求，当发送get请求之后，通过 .then来设置成功的回调函数，通过res.body拿到服务器返回的成功的数据。当通过then指定回调函数之后，在回调函数中，可以拿到数据服务器返回res，先判断res.status是否等于0，如果等于0表示成功，可以把res.message赋值给this.list ()；如果不等于0，提醒获取数据失败。
Post请求
this.$http.post()中需要接受三个参数：
第一个参数：要请求的url地址。第二个参数：要提交给服务器的数据，要以对象形式提交给服务器{name:this.name}。第三个参数：是一个配置对象，要以哪种表单数据类型提交过去。
2、JSONP请求
由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口不同的数据接口，浏览器认为这种访问不安全。
可以通过动态创建script标签的形式，把script标签的src属性指向数据接口的地址，因为script标签不存在的跨域限制，因为script标签不存在跨域限制，这种数据获取方式，称作JSONP。根据JSONP的实现原理可知，JSONP只支持Get请求。
实现
1、先在客户端定义一个回调方法，预定义对数据的操作；
2、再把这个回调方法的名称，通过URL传参的形式，提交到服务器的数据接口。
3、 服务器数据接口组织好要发送给客户端的数据，再拿着客户端传递过来的回调方法名称，拼接出一个调用这个方法的字符串，发送给客户端去解析执行。
4、客户端拿到服务器返回的字符串之后，当作Script脚本去解析执行，这样就能够拿到JSONP的数据了。
<body>
<script>
function showInfo123(data) {
console.log(data)
}
</script>
<script src="http://127.0.0.1:3000/getscript?callback=showInfo123"></script>
node简易服务
const http
= require('http');
const urlModule
= require('url');
const server
= http
.createServer();
server
.on('request', function (req
, res
) {
const { pathname
: url
, query
} = urlModule
.parse(req
.url
, true);
if (url
=== '/getscript') {
var data
= {
name
: 'xiaowei
,
age
: 18,
gender
: '女孩'
};
var scriptStr
= `${query.callback}(${JSON.stringify(data)})`;
res
.end(scriptStr
)
} else {
res
.end('404')
}
});
server
.listen(3000, function () {
console
.log('server listen at http://127.0.0.1:3000')
});
3、v-reource案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document
</title>
<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-resource-1.3.4.js"></script>
<link rel="stylesheet" href="lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">添加品牌
</h3>
</div>
<div class="panel-body form-inline">
<label>
Name:
<input type="text" v-model="name" class="form-control">
</label>
<input type="button" value="添加" @click="add" class="btn btn-primary">
</div>
</div>
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Id
</th>
<th>Name
</th>
<th>Ctime
</th>
<th>Operation
</th>
</tr>
</thead>
<tbody>
<tr v-for="item in list" :key="item.id">
<td>{{item.id}}
</td>
<td>{{item.name}}
</td>
<td>{{item.ctime}}
</td>
<td>
<a href="" @click.prevent="del(item.id)">删除
</a>
</td>
</tr>
</tbody>
</table>
</div>
<script>
Vue.http.options.root = 'http://www.liulongbin.top:3005';
Vue.http.options.emulateJSON = true;
var vm = new Vue({
el: '#app',
data: {
name: '',
list: [
]
},
created() {
this.getAllList()
},
methods: {
getAllList() {
this.$http.get('api/getprodlist').then(result => {
var result = result.body
if (result.status === 0) {
this.list = result.message
} else {
alert('获取数据失败！')
}
})
},
add() {
this.$http.post('api/addproduct', { name: this.name }).then(result => {
if (result.body.status === 0) {
this.getAllList()
this.name = ''
} else {
alert('添加失败！')
}
})
},
del(id) {
this.$http.get('api/delproduct/' + id).then(result => {
if (result.body.status === 0) {
this.getAllList()
} else {
alert('删除失败！')
}
})
}
}
});
</script>
</body>
</html>
