vue笔记(1): https://blog.csdn.net/qq_43537987/article/details/93402865
Vue中利用 vue-resource发起Ajax请求
- 除了 vue-resource 之外,还可以使用
axios
的第三方包实现实现数据的请求
参考网址:
https://www.runoob.com/vue2/vuejs-ajax.html
https://github.com/pagekit/vue-resource/blob/develop/docs/http.md
Vue.http.get('/someUrl', [config]).then(successCallback, errorCallback);
Vue.http.post('/someUrl', [body], [config]).then(successCallback, errorCallback);
errorCallback(失败时的回调)参数可省
get
getInfo() {
// 发起get请求
// 当发起get请求之后, 通过 .then 来设置成功的回调函数
//如果需要传递数据,可以使用 this.$http.get('get.php',{params : jsonData}) 格式, 第二个参数 jsonData 就是传到后端的数据。
this.$http.get('http://localhost/anli/select.php',{
params:{
a:1,b:2}}).then(function (result) {
// 通过 result.body 拿到服务器返回的成功的数据
console.log(result)
console.log(result.body)
})
},
post
postInfo() {
// 发起 post 请求 application/x-wwww-form-urlencoded
// 手动发起的 Post 请求,默认没有表单格式,所以,有的服务器处理不了
// 通过 post 方法的第三个参数, { emulateJSON: true } 设置 提交的内容类型 为 普通表单数据格式
this.$http.post('/anli/demo_test_post.php', {
name: "菜鸟教程",
url: "http://www.runoob.com"}, {
emulateJSON: true}).then(result => {
console.log(result.body)
}, res => {
console.log(res.status)
})
}