成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue的axios組件如何與PHP后端交換數(shù)據(jù)

CloudwiseAPM / 1271人閱讀

摘要：本文的目的在于探討前后端數(shù)據(jù)交互，并給出不同的解決方案供大家參考。實(shí)際使用只需在配置文件配置其他配置其他組件配置以上就是前端處理和后端處理兩種解決方案，可根據(jù)實(shí)際情況選擇

一、前言

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)?strong>解析失敗）。本文的目的在于探討前后端數(shù)據(jù)交互，并給出不同的解決方案供大家參考。

二、目前$_POST可接收的數(shù)據(jù)形式

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

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服務(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)典的前端庫(kù)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，簡(jiǎn)單來說，它默認(rèn)就是會(huì)把json傳到后端，并不轉(zhuǎn)化為QueryString。

三、解決方法 1、前端把數(shù)據(jù)轉(zhuǎn)化為QueryString

引入qs庫(kù)，調(diào)用stringify方法
2、PHP后端使用php://input獲取原始數(shù)據(jù)

在前端不做任何改變的情況下，因?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，簡(jiǎn)單的一個(gè)測(cè)試方法就是在框架的源代碼全文搜索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í)際情況選擇

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/30754.html

相關(guān)文章

  • vue的axios組件如何與PHP后端交換數(shù)據(jù)

    摘要：本文的目的在于探討前后端數(shù)據(jù)交互，并給出不同的解決方案供大家參考。實(shí)際使用只需在配置文件配置其他配置其他組件配置以上就是前端處理和后端處理兩種解決方案，可根據(jù)實(shí)際情況選擇 一、前言 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ù)的情況...

    韓冰 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    Tecode 評(píng)論0 收藏0

  • VUE知識(shí)點(diǎn)集錦

    摘要：載入前后在階段，實(shí)例的和都初始化了，但還是掛載之前為虛擬的節(jié)點(diǎn)，還未替換。類似于，不同在于提交的是，而不是直接變更狀態(tài)可以包含任意異步操作。 vue基礎(chǔ) 1、 router 路由與 a 標(biāo)簽的區(qū)別：https://www.jianshu.com/p/34b...2、 VUE雙向綁定的原理： 答：VUE實(shí)現(xiàn)雙向數(shù)據(jù)綁定的原理就是利用了 Object.defineProperty() 這個(gè)...

    APICloud 評(píng)論0 收藏0

  • 后端開發(fā)者的Vue學(xué)習(xí)之路（五）

    摘要：由服務(wù)器提供的響應(yīng)來自服務(wù)器響應(yīng)的狀態(tài)碼來自服務(wù)器響應(yīng)的狀態(tài)信息服務(wù)器響應(yīng)的頭是為請(qǐng)求提供的配置信息所以請(qǐng)求返回后，我們可以通過來獲取響應(yīng)情況。攔截器攔截器攔截器用于攔截發(fā)起的請(qǐng)求或用于攔截返回的響應(yīng)。目錄 上節(jié)內(nèi)容回顧 使用第三方組件庫(kù) 如何發(fā)起請(qǐng)求 請(qǐng)求錯(cuò)誤處理 請(qǐng)求帶參 ...

    jay_tian 評(píng)論0 收藏0

  • 急速JavaScript全棧教程

    摘要：使用訪問后端服務(wù)使用的美化組件的方法整合全棧服務(wù)其中的指的是。所幸是在這個(gè)教程內(nèi)，你不需要學(xué)習(xí)太多就可以把案例跑起來。另外一個(gè)組件負(fù)責(zé)顯示全部項(xiàng)目，并接受刪除事件，刪除指定的項(xiàng)目。它們分別是組件和組件這兩個(gè)組件的代碼實(shí)現(xiàn)，分別在文件和內(nèi)。 自從一年前發(fā)布了Vuejs小書的電子書，也有些日子沒有碰過它們了，現(xiàn)在因?yàn)轫?xiàng)目的緣故，需要使用JavaScript全棧開發(fā)。所以，我得把這個(gè)全棧環(huán)境...

    xingqiba 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<