[解決済み] Fetchを使ってx-www-form-urlencodedのリクエストをPOSTするにはどうしたらいいですか?
2022-04-23 22:34:47
質問
サーバーにフォームエンコードでPOSTしたいパラメータがあります。
{
'userName': '[email protected]',
'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
});
フォームエンコードされたパラメータをリクエストに含めるにはどうすればよいですか?
どのように解決するのですか?
x-www-form-urlencodedのペイロードは、以下のように自分で組み立てる必要があります。
var details = {
'userName': '[email protected]',
'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
})
なお
もし
を使用していた場合
fetch
を(十分にモダンな)ブラウザで使用する場合、React Nativeではなく、代わりに
URLSearchParams
オブジェクトを作成し、それをボディとして使用します。
標準的な状態を取得する
というのは
body
は
URLSearchParams
オブジェクトとしてシリアライズする必要があります。
application/x-www-form-urlencoded
. しかし、React Nativeでは、React Nativeの
は実装されていません。
URLSearchParams
.
関連
-
Vue Element-uiは、アイコンを追加するためのツリーコントロールノードを詳細に実装しています。
-
vueのグローバルがscss(mixin)を導入。
-
vueはopenlayersを使用してスカイマップとガオードマップをロードする
-
Vueのイベント処理とイベントモディファイアの解説
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] Firefox または Chrome ブラウザから HTTP POST リクエストを手動で送信する方法
-
[解決済み] POSTフォームのフィールドにアクセスする方法
-
[解決済み] フェッチする JSONデータをPOSTする
-
[解決済み] Node.jsでPOSTデータを処理する方法は?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
vueネットワークリクエストソリューション ネイティブネットワークリクエストとjsネットワークリクエストライブラリ
-
JavaScriptにおけるマクロタスクとミクロタスクの詳細
-
vueが定義するプライベートフィルタと基本的な使い方
-
Vueのフィルタの説明
-
Vueの一般的な組み込みディレクティブの説明
-
[解決済み] 配列の結合時に未定義のプロパティ 'push' を読み込むことができない
-
[解決済み] TypeError: $.ajax(...) is not a function?
-
[解決済み】JavaScriptエラー(Uncaught SyntaxError: Unexpected end of input)
-
[解決済み】<select>で現在選択されている<option>をJavaScriptで取得するにはどうすればよいですか?
-
nullのプロパティinnerHTMLを読み取れません エラーメッセージ