Comment puis-je utiliser XMLHttpRequest pour envoyer des données POST en JavaScript ?

Transmission de données POST à ​​l'aide de XMLHttpRequest

En JavaScript, l'objet XMLHttpRequest fournit un moyen d'envoyer des données à un serveur de manière asynchrone. Cela peut être utile lors de la transmission de données de formulaire sans recharger la page.

Conversion d'une soumission de formulaire en XMLHttpRequest

Considérez le formulaire HTML suivant :

<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 obtenir la fonctionnalité équivalente en utilisant XMLHttpRequest, nous pouvons écrire ce qui suit 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);

Ce code ouvre une requête POST à ​​l'URL spécifiée, définit les informations d'en-tête nécessaires et envoie les paramètres. Vous pouvez modifier la variable 'params' pour inclure toutes les données que vous devez transmettre.

Conversion objet en paramètre

Si vous souhaitez envoyer un objet en tant que paramètres, vous pouvez le convertir en un tableau de paires clé/valeur codées en URL en utilisant le code suivant :

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

Cela créera une chaîne qui pourra être utilisé comme paramètres de requête dans la variable 'params' dans l'appel XMLHttpRequest.

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!