199

サーバーにフォームエンコードして POST したいパラメーターがいくつかあります。

{
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
}

このようにリクエストを送信しています（現在はパラメーターなし）

var obj = {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8',
  },
};
fetch('https://example.com/login', obj)
  .then(function(res) {
    // Do stuff with result
  });

フォームでエンコードされたパラメーターをリクエストに含めるにはどうすればよいですか?

4

16 に答える 16

377

次のように、x-www-form-urlencoded ペイロードを自分でまとめる必要があります。

var details = {
    'userName': 'test@gmail.com',
    'password': 'Password!',
    'grant_type': 'password'
};

var formBody = [];
for (var property in details) {
  var encodedKey = encodeURIComponent(property);
  var encodedValue = encodeURIComponent(details[property]);
  formBody.push(encodedKey + "=" + encodedValue);
}
formBody = formBody.join("&");

fetch('https://example.com/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
  },
  body: formBody
})

React Native の代わりに (十分に最新の) ブラウザーで使用している場合fetchは、代わりにURLSearchParamsオブジェクトを作成し、それを本体として使用できます。これは、Fetch Standardbodyが、 がオブジェクトである場合、URLSearchParamsとしてシリアル化する必要があると述べているためapplication/x-www-form-urlencodedです。ただし、React Nativeは を実装していないURLSearchParamsため、React Native でこれを行うことはできません。

于 2016-06-01T08:02:01.867 に答える
2

httpリクエストの送信と傍受リクエストの作成がより簡単なreact-native-easy-appを使用できます。

import { XHttp } from 'react-native-easy-app';

* Synchronous request
const params = {name:'rufeng',age:20}
const response = await XHttp().url(url).param(params).formEncoded().execute('GET');
const {success, json, message, status} = response;


* Asynchronous requests
XHttp().url(url).param(params).formEncoded().get((success, json, message, status)=>{
    if (success){
       this.setState({content: JSON.stringify(json)});
    } else {
       showToast(msg);
    }
});
于 2020-04-01T06:15:43.020 に答える
2

仕様によると、使用してencodeURIComponentも適合するクエリ文字列は得られません。それは述べています：

  1. コントロールの名前と値はエスケープされます。スペース文字は に置き換えられ+、[RFC1738] のセクション 2.2 で説明されているように予約文字がエスケープされ%HHます。改行は "CR LF" のペア (つまり%0D%0A) として表されます。
  2. コントロールの名前/値は、ドキュメントに表示される順序でリストされています。名前と値は で区切られ、=名前と値のペアは で区切られ&ます。

問題は、スペースをではなくにencodeURIComponentエンコードすることです。%20+

encodeURIComponentform- b​​ody は、他の回答に示されている方法のバリエーションを使用してコーディングする必要があります。

const formUrlEncode = str => {
  return str.replace(/[^\d\w]/g, char => {
    return char === " " 
      ? "+" 
      : encodeURIComponent(char);
  })
}

const data = {foo: "bar߃©˙∑  baz", boom: "pow"};

const dataPairs = Object.keys(data).map( key => {
  const val = data[key];
  return (formUrlEncode(key) + "=" + formUrlEncode(val));
}).join("&");

// dataPairs is "foo=bar%C3%9F%C6%92%C2%A9%CB%99%E2%88%91++baz&boom=pow"
于 2018-09-06T13:58:38.647 に答える
1

元の例ではtransformRequest、オブジェクトを Form Encoded データに変換する関数があります。

JSON.stringify改訂された例では、オブジェクトを JSON に変換するものに置き換えました。

どちらの場合も、両方のケースでフォームエンコードされたデータを送信して'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'いると主張しています。

の代わりに Form Encoding 関数を使用してくださいJSON.stringify。

再更新:

最初のfetch例では、 をbodyJSON 値に設定します。

フォーム エンコード バージョンを作成しましたが、 をその値に設定する代わりにbody、新しいオブジェクトを作成し、フォーム エンコード データをそのオブジェクトのプロパティとして設定しました。

その余分なオブジェクトを作成しないでください。に値を割り当てるだけbodyです。

于 2016-02-13T21:55:01.783 に答える
-68

Form-Encoded POST リクエストをアップロードするには、FormDataオブジェクトを使用することをお勧めします。

コード例:

var params = {
    userName: 'test@gmail.com',
    password: 'Password!',
    grant_type: 'password'
};

var formData = new FormData();

for (var k in params) {
    formData.append(k, params[k]);
}

var request = {
    method: 'POST',
    headers: headers,
    body: formData
};

fetch(url, request);
于 2016-02-15T22:50:58.487 に答える