JavaScript で XMLHttpRequest を使用して POST データを送信する方法

JavaScript での XMLHttpRequest 経由の POST データの送信

JavaScript では、XMLHttpRequest は、リクエスト データを運ぶ POST リクエストなどの HTTP リクエストをサーバーに送信するための簡単な方法を提供します。 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 を使用してこのフォーム データを複製するには、次のことができます。次の JavaScript コード スニペットを利用します:

var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'user=person&pwd=password&organization=place&requiredkey=key';
http.open('POST', url, true);

// Send appropriate header information
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

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

上記のコードでは、 「params」変数には、URL エンコードされたキーと値のペアとして送信されるデータが含まれます。オブジェクトから動的な params を作成する場合は、次のコードを検討してください。

var params = new Object();
params.user = 'person';
params.pwd = 'password';
params.organization = 'place';
params.requiredkey = 'key';

// Encode the object into URL-encoded key/value pairs
let urlEncodedDataPairs = [], name;
for( name in params ) {
 urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(params[name]));
}

var params = urlEncodedDataPairs.join('&');

この修正された 'params' 変数は、前述のように XMLHttpRequest リクエストで使用できます。

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