axios のフォームデータ送信後の例

ここで、axios post で formdata を送信する例を共有します。これは非常に参考になるので、皆さんのお役に立てれば幸いです。

vue フレームワークでは、ajax リクエストの送信に axios を使用することを推奨しています。私は以前、vue コンポーネントで axios を使用する方法を説明するブログも書きました。しかし、以前は趣味でのみ get リクエストを使用していましたが、現在はブログをセットアップするときに post メソッドを使用しています。バックエンド (node.js) はフロントエンドから渡されたパラメーターをまったく取得できないことがわかりました。いくつかの調査の後、ついに問題が見つかりました。

投稿データの 4 つのエンコード方法

1.application/x-www-form-urlencoded

これが最も一般的な投稿エンコード方法であり、これが一般的なフォームのデフォルトです提出するための提出方法。ほとんどのサーバー言語は、このメソッドを適切にサポートしています。 PHP では、$_POST["key"] を使用してキーの値を取得できます。ノードでは、クエリ文字列ミドルウェアを使用してパラメーターを区切ることができます

app.post("/server",function(req,res){
 req.on("data",function(data){
 let key=querystring.parse(decodeURIComponent(data)).key;
 console.log("querystring:"+key)
 });
});

2.multipart/form-data

これは比較的一般的な投稿データ形式でもあり、フォームを使用してファイルをアップロードする場合は、フォーム form の enctype 属性または ajax の contentType パラメーターを multipart/form-data と等しくする必要があります。このエンコード形式を使用するときにバックグラウンドに送信されるデータは次のようになります

さまざまなフィールドが --boundary で始まり、コンテンツの説明情報が続き、最後にフィールドの特定のコンテンツが続きます。ファイルを転送する場合は、ファイル名とファイル タイプの情報も含める必要があります

3.application/json

axios はデフォルトの送信にこの形式を使用します。このエンコード方法を使用すると、シリアル化された JSON 文字列がバックグラウンドに渡されます。 application/json を application/x-www-form-urlencoded によって送信されたデータと比較できます

最初の application/json:

続いて application/x-www-form-urlencoded:

Itここでは、application/x-www-form-urlencoded によってバックグラウンドにアップロードされたデータがキーと値の形式で編成されているのに対し、application/json は直接 json 文字列であることが明確にわかります。 application/json を処理するときにバックグラウンドで application/x-www-form-urlencoded を処理する方法が依然として使用されている場合、問題が発生します。

たとえば、バックグラウンドのnode.jsはapplication/x-www-form-urlencodedを処理する以前の方法を依然として使用しており、querystring.parse(decodeURIComponent(data))の後に取得されるデータは次のようになります

現時点では、querystring .parse(decodeURIComponent(data)).key で取得できるのは unknown のみです

4.text/xml

残りのエンコード形式は text/xml ですが、これはあまり使用していません

解決策

axios post メソッドがデフォルトで application/json 形式を使用してデータをエンコードすることがわかったので、解決策は 2 つあります。1 つはバックグラウンドで受信パラメータを変更することで、もう 1 つは axios を変更することです。 post メソッドのエンコード形式は application/x-www-form-urlencoded に変更されるため、バックグラウンドでの変更は必要ありません。

まず最初の解決策を見てみましょう

vueコンポーネントで、axiosがpostリクエストを送信するためのコードは次のとおりです

this.$axios({
 method:"post",
 url:"/api/haveUser",
 data:{
 name:this.name,
 password:this.password
 }
}).then((res)=>{
 console.log(res.data);
})

このとき、コンソールの情報はネットワークヘッダーですこれは次のようなものです

バックグラウンドでデータを受信するには、body-parserミドルウェアを利用する必要があります。事前にインストールし、バックグラウンドコードでbody-parserを参照します

このスクリーンショットでは、動作するコードを示しています。 const bodyParser=require("body -parser");

次に、ルーティングでbody-parserを使用します

app.post("/api/haveUser",bodyParser.json(),function(req,res){
 console.log(req.body);
 let haveUser=require("../api/server/user.js");
 haveUser(req.body.name,req.body.password,res);
});

このとき、フロントエンドがpostリクエストを送信した後、req.bodyが出力されますバックグラウンドコンソール

現時点では、対応する値は req.body.name または req.body.password を通じて取得できます。

この方法は比較的簡単で、フロントデスクであまり多くの変更を必要としないので、この方法を使用することをお勧めします。

2番目の解決策、具体的な操作は次のとおりです

フロントエンド

this.$axios({
 method:"post",
 url:"/api/haveUser",
 headers:{
 'Content-type': 'application/x-www-form-urlencoded'
 },
 data:{
 name:this.name,
 password:this.password
 },
 transformRequest: [function (data) {
 let ret = ''
 for (let it in data) {
  ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
 }
 return ret
 }],
}).then((res)=>{
 console.log(res.data);
})

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前，修改请求数据。这样操作之后，后台querystring.parse(decodeURIComponent(data))获取到的就是类似于{ name: 'w', password: 'w' }的对象。

后台代码如下

app.post("/api/haveUser",function(req,res){
 let haveUser=require("../api/server/user.js");
 req.on("data",function(data){
  let name=querystring.parse(decodeURIComponent(data)).name;
  let password=querystring.parse(decodeURIComponent(data)).password;
  console.log(name,password)
  haveUser(name,password,res);
 });
});

这种方法明显就要比第一种麻烦一点，但不需要后台做过多处理。所以具体操作还是得根据实际情况决定。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

jQuery+Cookie实现切换皮肤功能

jQuery实现的回车触发按钮事件功能示例

基于jQuery实现Ajax验证用户名是否可用实例

以上がaxios のフォームデータ送信後の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。