axios是vue項目中用來使用ajax技術來與后臺交換數據的一個組件，在vue的作者推薦下，相當數量的vue前端開發人員開始使用它。但是在實際開發過程中，卻時有出現后端接收不到前端post過來的數據的情況。以PHP語言開發的后臺為例，PHP原生的預定義變量$_POST就無法接收（因為解析失敗）。本文的目的在于探討前后端數據交互，并給出不同的解決方案供大家參考。

Form Data
這種數據形式其實就是鍵值對，例如id:1，如果有多組鍵值對并且有嵌套的情況，則如下

role-name:tarole-desc:xxxxxxxxxcloud[cla]:001cloud[cla_baijia]:001cloud[cla_gongkai]:001local[soft5]:001local[soft6]:001mgmt[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  input type= button name= login html' target='_blank'>value= 數據提交 @click= post  /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 = yiiwebJsonParser  // 其他配置 //其他組件配置 ]

以上就是前端處理和后端處理兩種解決方案，可根據實際情況選擇

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP ！

相關推薦：

如何設置yii數據庫的長連接

關于yii改善并發數的性能優化的方法

以上就是如何讓vue的axios組件和PHP后端交換數據的詳細內容，PHP教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。