XMLHttpRequest を使用して JavaScript で POST データを送信するにはどうすればよいですか?-jsチュートリアル-php.cn

XMLHttpRequest を使用して JavaScript で POST データを送信するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-19 05:43:08

オリジナル

105 人が閲覧しました

How Can I Use XMLHttpRequest to Send POST Data in JavaScript?

XMLHttpRequest を使用した POST データ送信

JavaScript では、XMLHttpRequest オブジェクトはサーバーにデータを非同期的に送信する方法を提供します。これは、ページをリロードせずにフォームデータを送信する場合に便利です。

フォーム送信を 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>

ログイン後にコピー

XMLHttpRequest を使用して同等の機能を実現するには、次のように記述できます。 code:

var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

http.onreadystatechange = function() {
    if(http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
    }
}
http.send(params);

ログイン後にコピー

このコードは、指定された URL への POST リクエストを開き、必要なヘッダー情報を設定し、パラメーターを送信します。「params」変数を変更して、送信する必要があるデータを含めることができます。

オブジェクトからパラメータへの変換

送信したいオブジェクトがある場合パラメータとして、次のコードを使用して、URL エンコードされたキーと値のペアの配列に変換できます。

var params = new Object();
params.myparam1 = myval1;
params.myparam2 = myval2;

let urlEncodedData = "", urlEncodedDataPairs = [], name;
for( name in params ) {
    urlEncodedDataPairs.push(encodeURIComponent(name)+'='+encodeURIComponent(params[name]));
}

ログイン後にコピー

これにより、 XMLHttpRequest 呼び出しの「params」変数のリクエストパラメーターとして使用できる文字列。

以上がXMLHttpRequest を使用して JavaScript で POST データを送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。