如何讓vue的axios元件和PHP後端交換數據

這篇文章主要介紹了關於如何讓vue的axios組件和PHP後端交換數據，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

一、前言

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

二、目前$_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 。

三、解決方法

1、前端把資料轉換成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>

2、PHP後端使用php://input取得原始資料

在前端不做任何改變的情況下，因為預先定義變數$_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中文網！

相關推薦：

如何設定yii資料庫的長連接

#關於yii改善並發數的效能最佳化的方法

以上是如何讓vue的axios元件和PHP後端交換數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！