vue結合axios與后端進行ajax交互的方法
更新時間:2018年07月06日 14:38:33 作者:章魚喵_
本篇文章主要介紹了vue結合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)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
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