[解決済み】JavaScriptでフォーム送信のようなpost requestを行う。
2022-03-17 20:25:45
質問
ブラウザを別のページに誘導しようとしています。もし、GETリクエストをしたいのであれば、次のように言うかもしれません。
document.location.href = 'http://example.com/q=a';
しかし、私がアクセスしようとしているリソースは、POSTリクエストを使用しない限り、適切に応答してくれません。もしこれが動的に生成されないのであれば、私はHTMLの
<form action="http://example.com/" method="POST">
<input type="hidden" name="q" value="a">
</form>
そうすると、DOMからフォームを送信するだけになりますね。
しかし、本当は次のようなJavaScriptのコードが欲しいのです。
post_to_url('http://example.com/', {'q':'a'});
クロスブラウザでの最適な実装は?
編集
分かりにくくて申し訳ありません。フォームを送信するように、ブラウザの場所を変更するソリューションが必要です。もし、これが XMLHttpRequest が、明らかではありません。そして、これは非同期であってはならないし、XMLを使用してはならないので、Ajaxは答えではありません。
どのように解決するのか?
動的に作成する
<input>
をフォームで送信します。
/**
* sends a request to the specified url from a form. this will change the window location.
* @param {string} path the path to send the post request to
* @param {object} params the parameters to add to the url
* @param {string} [method=post] the method to use on the form
*/
function post(path, params, method='post') {
// The rest of this code assumes you are not using a library.
// It can be made less verbose if you use one.
const form = document.createElement('form');
form.method = method;
form.action = path;
for (const key in params) {
if (params.hasOwnProperty(key)) {
const hiddenField = document.createElement('input');
hiddenField.type = 'hidden';
hiddenField.name = key;
hiddenField.value = params[key];
form.appendChild(hiddenField);
}
}
document.body.appendChild(form);
form.submit();
}
例
post('/contact/', {name: 'Johnny Bravo'});
EDIT
: これだけupvotedされているのだから、みんなこれをコピーペーストしているのだろう。そこで、私は
hasOwnProperty
をチェックし、不用意なバグを修正しました。
関連
-
[解決済み】コンソールがUnterminated JSX contentsエラーを投げる【終了しました
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]
-
[解決済み] JavaScriptで "use strict "は何をするのか、その根拠は?
-
[解決済み] JavaScriptで文字列が部分文字列を含むかどうかを確認する方法は?
-
[解決済み] あるJavaScriptファイルを他のJavaScriptファイルにインクルードするにはどうすればよいですか?
-
[解決済み] JavaScriptでタイムスタンプを取得する方法は?
-
[解決済み] 私のJavaScriptコードは "No 'Access-Control-Allow-Origin' header is present on requested resource "というエラーを受け取りますが、Postmanはそうならないのはなぜですか?
-
[解決済み】HTTPのPOSTとPUTの違いは何ですか?
-
[解決済み】JavaScriptの比較では、どちらの等号演算子(== vs ===)を使うべきですか?
-
[解決済み】オブジェクトからプロパティを削除する(JavaScript)
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】Google Conversionsが動作しない - スクリプトが読み込まれない
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】JavaScript ランタイムエラー:'$'が未定義です。
-
[解決済み】React-Routerの子が1つしかない。
-
[解決済み】リソースはドキュメントと解釈されるが、MIMEタイプはapplication/zipで転送される
-
[解決済み】TypeError: res.status は関数ではありません。
-
[解決済み】PhantomJS 2.1.1を使用してReactJSアプリケーションをレンダリングできない理由とは?
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み] JavaScript/jQueryでリダイレクト時にPOSTデータを送信する?[重複)。