ホームページ >バックエンド開発 >PHPチュートリアル >vue の axios コンポーネントと PHP バックエンドでデータを交換する方法
vue の axios コンポーネントと PHP バックエンドでデータを交換する方法
- 不言オリジナル
- 2018-07-10 15:34:462665ブラウズ
この記事では主に 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 の ajax リクエストは受信データ フォームを決定し、暗黙的に param() メソッドを呼び出して json データを変換します。そのため、ユーザーは json データを直接提供するだけで、データをバックグラウンドに正常に送信できます。 param() メソッドを (手動で) 呼び出す機会はあまりありません。デフォルトで jq によって送信されるリクエスト ヘッダーも application/x-www-form-urlencoded ですが、ほとんどの場合、ユーザーが手動で設定する必要はありません。
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 を検索することです。見つかった場合はサポートされていますが、そうでない場合はサポートされていないため、該当する処理コードを自分で拡張する必要があります。
実際の使用では、設定ファイル web.php
'components' => [ 'request' => [ 'parsers' => [ 'application/json' => 'yii\web\JsonParser' ], // 其他配置 ], //其他组件配置 ]を設定するだけで済みます。上記はフロントエンド処理とバックエンド処理の 2 つのソリューションであり、実際の状況に応じて選択できます上記は記事の全文です。皆様の学習にお役に立てれば幸いです。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。 関連する推奨事項:
以上がvue の axios コンポーネントと PHP バックエンドでデータを交換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。