如何讓vue的axios組件和PHP後端交換資料

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

一、前言

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

二、目前$_POST可接收的資料形式

Form Data
這種資料形式其實就是索引值對，例如id:1，如果有多組索引值對並且有嵌套的情況，則如下

role-name:tarole-desc:xxxxxxxxxid:2cloud[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。

三、解決方案

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'            ],            // 其他配置        ],        //其他組件配置    ]

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

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