Bagaimana untuk Menghantar Data POST Menggunakan XMLHttpRequest dalam JavaScript?

Menghantar Data POST melalui XMLHttpRequest dalam JavaScript

Dalam JavaScript, XMLHttpRequest menyediakan kaedah mudah untuk menghantar permintaan HTTP ke pelayan, termasuk permintaan POST yang membawa data permintaan. Mari kita pertimbangkan cara menghantar data yang setara dengan borang menggunakan XMLHttpRequest.

Andaikan anda mempunyai borang HTML dengan input tersembunyi berikut:

<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>

Untuk mereplikasi data borang ini menggunakan XMLHttpRequest, anda boleh gunakan coretan kod JavaScript berikut:

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);

Dalam kod di atas, Pembolehubah 'params' mengandungi data yang akan diserahkan sebagai pasangan kunci/nilai yang dikodkan URL. Jika anda ingin mencipta param dinamik daripada objek, pertimbangkan kod berikut:

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('&');

Pembolehubah 'params' yang disemak ini kemudiannya boleh digunakan dalam permintaan XMLHttpRequest seperti yang diterangkan sebelum ini.

Atas ialah kandungan terperinci Bagaimana untuk Menghantar Data POST Menggunakan XMLHttpRequest dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!