vue結(jié)合axios與后端進行ajax交互的方法
更新時間:2018年07月06日 14:38:33 作者:章魚喵_
本篇文章主要介紹了vue結(jié)合axios與后端進行ajax交互的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
以前vue官方推薦的ajax庫是vue-resource, 現(xiàn)在改為axios
實現(xiàn)的效果:

異步請求
頁面異步發(fā)出get請求獲取數(shù)據(jù),提交表單異步post數(shù)據(jù)到服務端
客戶端
代碼解析:
// 服務端請求地址
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);
// 獲取服務端返回的數(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
});
服務端
使用php作為服務端程序
代碼解析:
<?php
header("Access-Control-Allow-Origin:*"); // 如果客戶端和服務端不同域,要加上這行代碼,不然會報跨域錯誤
$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
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue使用el-table 添加行手動填寫數(shù)據(jù)和刪除行及提交保存功能
遇到這樣的需求點擊新增按鈕實現(xiàn)下列彈窗的效果,點擊添加行新增一行,點擊刪除進行刪除行,點擊提交將數(shù)據(jù)傳遞到后端進行保存,怎么實現(xiàn)的呢,下面通過實例代碼給大家詳細講解,感興趣的朋友一起看看吧2023-12-12
在vue中通過render函數(shù)給子組件設置ref操作
這篇文章主要介紹了在vue中通過render函數(shù)給子組件設置ref操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11

