[解決済み] XMLHttpRequestでPOSTデータを送信する
2022-03-15 02:32:38
質問
JavaScriptでXMLHttpRequestを使用してデータを送信したいのですが、どうすればよいですか?
HTMLで以下のようなフォームがあるとします。
<form name="inputform" action="somewhere" method="post">
<input type="hidden" value="person" name="user">
<input type="hidden" value="password" name="pwd">
<input type="hidden" value="place" name="organization">
<input type="hidden" value="key" name="requiredkey">
</form>
JavaScriptでXMLHttpRequestを使用して同等のものを書くにはどうしたらよいですか?
どのように解決するのですか?
以下のコードは、この方法を示しています。
var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);
//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);
オブジェクトを作成した場合は、次のコードで params に変換することができます。
var params = new Object();
params.myparam1 = myval1;
params.myparam2 = myval2;
// Turn the data object into an array of URL-encoded key/value pairs.
let urlEncodedData = "", urlEncodedDataPairs = [], name;
for( name in params ) {
urlEncodedDataPairs.push(encodeURIComponent(name)+'='+encodeURIComponent(params[name]));
}
関連
-
vueの補間表現とv-textディレクティブの違いについて
-
[解決済み] let "と "var "の使い分けは?
-
[解決済み] JavaScriptで文字列をbooleanに変換するにはどうしたらいいですか?
-
[解決済み] JavaScriptでJSONをきれいに印刷する
-
[解決済み] jQueryを使ったAjaxリクエストの中断
-
[解決済み] フォーム送信のようなJavaScriptのポストリクエスト
-
[解決済み] HTTP POSTリクエストでは、どのようにパラメータが送信されるのですか?
-
[解決済み] Firefox または Chrome ブラウザから HTTP POST リクエストを手動で送信する方法
-
[解決済み】HTTPのPOSTとPUTの違いは何ですか?
-
[解決済み] application/x-www-form-urlencoded or multipart/form-data?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
vue3レスポンシブ対応のためのsetup+ref+reactive
-
親子コンポーネント通信を解決する3つのVueスロット
-
Vueがechartsのtooltipにクリックイベントを追加するケーススタディ
-
Vueはランニングライト形式のテキストを水平方向にスクロールする機能を実装している
-
vue+webrtc(Tencent cloud)ライブ機能の実践を実現するために
-
vueディレクティブv-bindの使用と注意点
-
Vueでルートネスティングを実装する例
-
vueにおけるfilterの適用シーンについて解説します。
-
[解決済み】リソースの読み込みに失敗した:Bind関数でサーバーが500(Internal Server Error)のステータスで応答した【非公開
-
[解決済み】GETできない / Nodejsエラー