以前vue官方推薦的ajax庫是vue-resource, 現(xiàn)在改為axios哥桥，原因詳見Retiring vue-resource
實(shí)現(xiàn)的效果：
異步請求
頁面異步發(fā)出get請求獲取數(shù)據(jù)糠悼，提交表單異步post數(shù)據(jù)到服務(wù)端
客戶端
代碼解析：
// 服務(wù)端請求地址
let url = 'http://local.php.com/index.php';
let vm = new Vue({
el: "#app",
data: {
list: [],
name: '',
saying: '',
},
methods: {
add() {
// 傳送的數(shù)據(jù)為json格式
let data = JSON.stringify({
name: this.name,
saying: this.saying
});
axios.post(url, data)
.then(function (response) {
// console.log(response);
// 獲取服務(wù)端返回的數(shù)據(jù)
vm.$data.list = response.data;
})
.catch(function (error) {
console.log(error);
});
}
}
});
axios.get(url, {})
.then(function (response) {
vm.$data.list = response.data;
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});
服務(wù)端
使用php作為服務(wù)端程序
代碼解析：
<?php
header("Access-Control-Allow-Origin:*"); // 如果客戶端和服務(wù)端不同域，要加上這行代碼夜焦，不然會(huì)報(bào)跨域錯(cuò)誤
$data = [
1 => ['name' => '孫悟空', 'saying' => '我是在地球上成長的賽亞人'],
];
$post = file_get_contents("php://input"); // 不要用$_POST接收數(shù)據(jù)
if ($post) {
$data[] = json_decode($post, true);
}
echo json_encode($data, true);
異步請求.gif
