這篇文章主要介紹了關於如何讓vue的axios組件和PHP後端交換數據，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下
axios是vue專案中用來使用ajax技術來與後台交換資料的一個元件，在vue的作者推薦下，相當數量的vue前端開發人員開始使用它。但在實際開發過程中，卻時有出現後端接收不到前端post過來的資料的情況。以PHP語言開發的後台為例，PHP原生的預定義變數$_POST就無法接收（因為解析失敗）。本文的目的在於探討前後端資料交互，並給出不同的解決方案供大家參考。
Form Data
這種資料形式其實就是鍵值對，例如id:1，如果有多組鍵值對且有嵌套的情況，則如下
role-name:ta role-desc:xxxxxxxxx id:2 cloud[cla]:001 cloud[cla_baijia]:001 cloud[cla_gongkai]:001 local[soft5]:001 local[soft6]:001 mgmt[mgmt-clouditems]:01
PHP服務端接收到的資料其實是這樣子的
role-name=ta&role-desc=xxxxxxxxx&id=2&cloud%5Bcla%5D=001&cloud%5Bcla_baijia%5D=001&cloud%5Bcla_gongkai%5D=001&local%5Bsoft-5%5D=001&local%5Bsoft-6%5D=001&mgmt%5Bmgmt-clouditems%5D=01
是不是與url的參數特別像？
這種鍵值對的資料稱為QueryString，瀏覽器的原生form 表單傳送這種資料時會把請求頭設為application/x-www-form-urlencoded 。
QueryString就能被PHP的$_POST成功解析
經典的前端函式庫jQuery下的jQuery ajax 的serialize()方法和param()方法就是為把資料轉換為QueryString而提供的解決方案，前者轉換表單數據，後者轉換JSON資料。
而且jQuery的ajax請求中會判斷傳入的數據形式，隱式調用param()方法來轉化json數據，所以用戶只需直接提供json數據即可成功把數據成功提交到後台，需要顯式（手動）呼叫param()方法的機會不多。 jq預設的發送的請求頭也是application/x-www-form-urlencoded，大多數情況下並不需要使用者手動設定。
回到我們的axios中，axios預設發送的請求頭為application/json，簡單來說，它預設就是會把json傳到後端，並不轉化為QueryString 。
#引入qs函式庫，呼叫stringify方法
<template>
<p>
<input type="button" name="login" value="数据提交" @click="post">
</p>
</template>
<script>
import axios from "axios"
import qs from "qs"
var json={
"role-name": "ta",
"role-desc": "xxxxxxxxx",
"id": 2,
"cloud": {
"cla": "001",
"cla_baijia": "001",
"cla_gongkai": "001"
},
"local": {
"soft-5": "001",
"soft-6": "001"
},
"mgmt": {
"mgmt-clouditems": "01"
}
};
export default {
methods:{
post(){
axios.post("http://localhost/web/index.php/admin/login/login",json,{
//配置`transformRequest` ，在向服务器发送前，修改请求数据，axios会根据修改后的数据，自动设置请求头
transformRequest:[function(data){
return qs.stringify(data);//把数据转化为QueryString
}]
}).then(res=>{
console.log(res);
})
}
}
}
</script>在前端不做任何改變的情況下，因為預先定義變數$_POST無法解析，php後端只能使用php://input取得原始的數據，然後再轉化為想要的數據形式。
如果PHP後台使用原生開發，則可自訂一個函數處理每次請求的資料。
如果PHP後台使用特定的框架開發，要看框架本身是否支援處理php://input，簡單的一個測試方法就是在框架的源代碼全文搜尋php://input，如果能搜到，則有支持，否則不支持，需要自行擴充相關的處理程式碼。
以PHP框架yii2.0為例，全文搜尋vendor目錄，可知在yiisoft->yii2->web->Request.php的494行有相關處理程式碼。
實際使用只需在設定檔web.php配置
'components' => [ 'request' => [ 'parsers' => [ 'application/json' => 'yii\web\JsonParser' ], // 其他配置 ], //其他组件配置 ]
以上就是前端處理和後端處理兩種解決方案，可依實際情況選擇
以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！
相關推薦：
以上是如何讓vue的axios元件和PHP後端交換數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！
