国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

vue的axios組件如何與PHP后端交換數據

CloudwiseAPM / 1245人閱讀

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

一、前言

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方法
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" => "yiiwebJsonParser"
            ],
            // 其他配置
        ],
        //其他組件配置
    ]

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/30754.html

相關文章

  • vue的axios組件如何與PHP后端交換數據

    摘要：本文的目的在于探討前后端數據交互，并給出不同的解決方案供大家參考。實際使用只需在配置文件配置其他配置其他組件配置以上就是前端處理和后端處理兩種解決方案，可根據實際情況選擇 一、前言 axios是vue項目中用來使用ajax技術來與后臺交換數據的一個組件，在vue的作者推薦下，相當數量的vue前端開發人員開始使用它。但是在實際開發過程中，卻時有出現后端接收不到前端post過來的數據的情況...

    韓冰 評論0 收藏0

  • VUE知識點集錦

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

    Tecode 評論0 收藏0

  • VUE知識點集錦

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

    APICloud 評論0 收藏0

  • 后端開發者的Vue學習之路（五）

    摘要：由服務器提供的響應來自服務器響應的狀態碼來自服務器響應的狀態信息服務器響應的頭是為請求提供的配置信息所以請求返回后，我們可以通過來獲取響應情況。攔截器攔截器攔截器用于攔截發起的請求或用于攔截返回的響應。目錄 上節內容回顧 使用第三方組件庫 如何發起請求 請求錯誤處理 請求帶參 ...

    jay_tian 評論0 收藏0

  • 急速JavaScript全棧教程

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

    xingqiba 評論0 收藏0

發表評論

0條評論

CloudwiseAPM

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<