Comment envoyer des données POST à ​​l'aide de XMLHttpRequest en JavaScript ?

Envoi de données POST via XMLHttpRequest en JavaScript

En JavaScript, XMLHttpRequest fournit une méthode simple pour envoyer des requêtes HTTP à un serveur, y compris des requêtes POST contenant des données de requête. Voyons comment envoyer des données équivalentes à un formulaire à l'aide de XMLHttpRequest.

Supposons que vous disposiez d'un formulaire HTML avec les entrées masquées suivantes :

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

Pour répliquer les données de ce formulaire à l'aide de XMLHttpRequest, vous pouvez utilisez l'extrait de code JavaScript suivant :

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

Dans le code ci-dessus, la variable 'params' contient les données à soumettre sous forme de paires clé/valeur codées en URL. Si vous souhaitez créer des paramètres dynamiques à partir d'un objet, considérez le code suivant :

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

Cette variable 'params' révisée peut ensuite être utilisée dans la requête XMLHttpRequest comme décrit précédemment.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!