vue の axios コンポーネントと PHP バックエンドでデータを交換する方法

不言

リリース： 2023-04-02 22:38:01

オリジナル

2647 人が閲覧しました

この記事では主に Vue の axios コンポーネントと PHP バックエンドの間でデータをやり取りする方法を紹介します。ある参考値がありますので、共有します。必要な友人は参考にしてください。

1. はじめに

axios は、ajax 技術を使用してバックグラウンドでデータを交換する vue プロジェクトのコンポーネントであり、vue の作者の推奨のもと、かなりの数の vue フロントエンド開発者が使用し始めました。しかし、実際の開発プロセスでは、フロントエンドから送信されたデータをバックエンドが受信できない場合があります。 PHP 言語開発の背景を例に挙げると、PHP のネイティブの事前定義変数 $_POST を受け取ることができません ( 解析に失敗したため )。この記事の目的は、フロントエンドとバックエンドのデータ相互作用を調査し、参考としてさまざまなソリューションを提供することです。

2. 現在、$_POST が受信できるデータフォーム

フォームデータ
このデータフォームは、実際には、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 と呼ばれます。ブラウザのネイティブフォームがこのデータを送信すると、リクエストヘッダーは 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 には変換しません。 . .

3. 解決策

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-> の 494 行目に関連する処理コードがあることがわかります。 ;リクエスト.php。

実際の使用では、設定ファイル web.php

    'components' => [
        'request' => [
            'parsers' => [
                'application/json' => 'yii\web\JsonParser'
            ],
            // 其他配置
        ],
        //其他组件配置
    ]

ログイン後にコピー

を設定するだけで済みます。上記はフロントエンド処理とバックエンド処理の 2 つのソリューションであり、実際の状況に応じて選択できます

上記は記事の全文です。皆様の学習にお役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。