axios是vue項(xiàng)目中用來使用ajax技術(shù)來與后臺(tái)交換數(shù)據(jù)的一個(gè)組件，在vue的作者推薦下，相當(dāng)數(shù)量的vue前端開發(fā)人員開始使用它。但是在實(shí)際開發(fā)過程中，卻時(shí)有出現(xiàn)后端接收不到前端post過來的數(shù)據(jù)的情況。以PHP語言開發(fā)的后臺(tái)為例，PHP原生的預(yù)定義變量$_POST就無法接收（因?yàn)榻馕鍪。１疚牡哪康脑谟谔接懬昂蠖藬?shù)據(jù)交互，并給出不同的解決方案供大家參考。

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

role-name:tarole-desc:xxxxxxxxxcloud[cla]:001cloud[cla_baijia]:001cloud[cla_gongkai]:001local[soft5]:001local[soft6]:001mgmt[mgmt-clouditems]:01

PHP服務(wù)端接收到的數(shù)據(jù)其實(shí)是這樣子的

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的參數(shù)特別像？
這種鍵值對(duì)的數(shù)據(jù)被稱為QueryString，瀏覽器的原生 form 表單發(fā)送這種數(shù)據(jù)時(shí)會(huì)把請(qǐng)求頭設(shè)為application/x-www-form-urlencoded。
QueryString就能被PHP的$_POST成功解析

經(jīng)典的前端庫jQuery下的jQuery ajax 的 serialize()方法和param()方法就是為把數(shù)據(jù)轉(zhuǎn)化為QueryString而提供的解決方案，前者轉(zhuǎn)化表單數(shù)據(jù)，后者轉(zhuǎn)化JSON數(shù)據(jù)。
而且jQuery的ajax請(qǐng)求中會(huì)判斷傳入的數(shù)據(jù)形式，隱式調(diào)用param()方法來轉(zhuǎn)化json數(shù)據(jù)，所以使用者只需直接提供json數(shù)據(jù)即可成功把數(shù)據(jù)成功提交到后臺(tái)，需要顯式（手動(dòng)）調(diào)用param()方法的機(jī)會(huì)不多。jq默認(rèn)的發(fā)送的請(qǐng)求頭也是application/x-www-form-urlencoded，大多數(shù)情況下并不需要使用者手動(dòng)設(shè)置。

回到我們的axios中，axios默認(rèn)發(fā)送的請(qǐng)求頭為application/json，簡單來說，它默認(rèn)就是會(huì)把json傳到后端，并不轉(zhuǎn)化為QueryString。

引入qs庫，調(diào)用stringify方法

 template  input type= button name= login html' target='_blank'>value= 數(shù)據(jù)提交 @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` ，在向服務(wù)器發(fā)送前，修改請(qǐng)求數(shù)據(jù)，axios會(huì)根據(jù)修改后的數(shù)據(jù)，自動(dòng)設(shè)置請(qǐng)求頭 transformRequest:[function(data){ return qs.stringify(data);//把數(shù)據(jù)轉(zhuǎn)化為QueryString }).then(res= { console.log(res); /script 

在前端不做任何改變的情況下，因?yàn)轭A(yù)定義變量$_POST無法解析，php后端只能使用php://input獲取原始的數(shù)據(jù)，然后再轉(zhuǎn)化為想要的數(shù)據(jù)形式。
如果PHP后臺(tái)使用原生開發(fā)，則可自定義一個(gè)函數(shù)處理每次請(qǐng)求的數(shù)據(jù)。
如果PHP后臺(tái)使用特定的框架開發(fā)，則要看框架本身是否支持處理php://input，簡單的一個(gè)測試方法就是在框架的源代碼全文搜索php://input，如果能搜到，則有支持，否則不支持，需要自己擴(kuò)展相關(guān)的處理代碼。

以PHP框架yii2.0為例，全文搜索vendor目錄，可知在yiisoft- yii2- web- Request.php的494行有相關(guān)處理代碼。
實(shí)際使用只需在配置文件web.php配置

 components = [ request = [ parsers = [ application/json = yiiwebJsonParser  // 其他配置 //其他組件配置 ]

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

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，更多相關(guān)內(nèi)容請(qǐng)關(guān)注PHP ！

相關(guān)推薦：

如何設(shè)置yii數(shù)據(jù)庫的長連接

關(guān)于yii改善并發(fā)數(shù)的性能優(yōu)化的方法

以上就是如何讓vue的axios組件和PHP后端交換數(shù)據(jù)的詳細(xì)內(nèi)容，PHP教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。