Je voudrais envoyer des données en utilisant un XMLHttpRequest en JavaScript.
Disons que j'ai le formulaire suivant en 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>
Comment puis-je écrire l'équivalent à l'aide d'un XMLHttpRequest en JavaScript?
Réponses:
Le code ci-dessous montre comment procéder.
var http = new XMLHttpRequest();
var url = 'get_data.php';
var params = 'orem=ipsum&name=binny';
http.open('POST', url, true);
//Send the proper header information along with the request
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);Connectionet les en- Content-Lengthtêtes ne peuvent pas être définis. Il indiquera "Refus de définir un en-tête non sécurisé" content-length "". Voir stackoverflow.com/a/2624167/632951
var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.onload = function () {
// do something to response
console.log(this.responseText);
};
xhr.send('user=person&pwd=password&organization=place&requiredkey=key');Ou si vous pouvez compter sur la prise en charge du navigateur, vous pouvez utiliser FormData :
var data = new FormData();
data.append('user', 'person');
data.append('pwd', 'password');
data.append('organization', 'place');
data.append('requiredkey', 'key');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.onload = function () {
// do something to response
console.log(this.responseText);
};
xhr.send(data);http.setRequestHeader("Content-length", params.length);et http.setRequestHeader("Connection", "close");. Sont-ils nécessaires? Sont-ils seulement nécessaires sur certains navigateurs? (Il y a un commentaire sur cette autre page disant que définir l'en-tête Content-Length était "exactement ce qui était nécessaire")
Content-Typechange automatiquement en multipart/form-data. Cela a de sérieuses implications côté serveur et comment les informations y sont accessibles.
Je suggérerais d'examiner fetch. C'est l'équivalent ES5 et utilise Promises. Il est beaucoup plus lisible et facilement personnalisable.
const url = "http://example.com";
fetch(url, {
method : "POST",
body: new FormData(document.getElementById("inputform")),
// -- or --
// body : JSON.stringify({
// user : document.getElementById('user').value,
// ...
// })
}).then(
response => response.text() // .json(), etc.
// same as function(response) {return response.text();}
).then(
html => console.log(html)
);Dans Node.js, vous devrez importer en fetchutilisant:
const fetch = require("node-fetch");Si vous souhaitez l'utiliser de manière synchrone (ne fonctionne pas dans la portée supérieure):
const json = await fetch(url, optionalOptions)
.then(response => response.json()) // .text(), etc.
.catch((e) => {});Plus d'informations:
function()exemples au cas où vous ne préféreriez pas =>. Vous devez absolument utiliser JS moderne pour faciliter l'expérience du développeur. S'inquiéter d'un petit pourcentage de personnes bloquées sur IE n'en vaut la peine que si vous êtes une grande entreprise
thismot clé. J'aime le mentionner, mais je déteste aussi secrètement les gens qui utilisent thiset l'architecture d'héritage au lieu des usines fonctionnelles. Pardonnez-moi, je suis nœud.
thisaussi la peste, et tout le monde devrait lire this.
this.
FormDatapour soumettre une demande AJAX<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<script>
"use strict";
function submitForm(oFormElement)
{
var xhr = new XMLHttpRequest();
xhr.onload = function(){ alert (xhr.responseText); } // success case
xhr.onerror = function(){ alert (xhr.responseText); } // failure case
xhr.open (oFormElement.method, oFormElement.action, true);
xhr.send (new FormData (oFormElement));
return false;
}
</script>
</head>
<body>
<form method="post" action="somewhere" onsubmit="return submitForm(this);">
<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" />
<input type="submit" value="post request"/>
</form>
</body>
</html>Cela ne répond pas complètement à la question OP car cela oblige l'utilisateur à cliquer pour soumettre la demande. Mais cela peut être utile aux personnes qui recherchent ce type de solution simple.
Cet exemple est très simple et ne prend pas en charge la GETméthode. Si vous êtes intéressé par des exemples plus sophistiqués, veuillez consulter l'excellente documentation MDN . Voir aussi une réponse similaire à propos de XMLHttpRequest pour publier un formulaire HTML .
Limitation de cette solution: comme souligné par Justin Blank et Thomas Munk (voir leurs commentaires), FormDatan'est pas pris en charge par IE9 et inférieur, et le navigateur par défaut sur Android 2.3.
FormDataest supporté par de nombreux navigateurs sauf IE9 et Android 2.3 (et OperaMini mais ce dernier n'est pas largement utilisé). À la vôtre ;-)
onsubmit="return submitForm(this);"sinon l'utilisateur est redirigé vers l'URL dans la demande.
false. Si trueest retourné, la demande POST d'origine (indésirable) sera envoyée! Votre réponse est correcte, désolé pour la confusion.
Voici une solution complète avec
application-json:
// Input values will be grabbed by ID
<input id="loginEmail" type="text" name="email" placeholder="Email">
<input id="loginPassword" type="password" name="password" placeholder="Password">
// return stops normal action and runs login()
<button onclick="return login()">Submit</button>
<script>
function login() {
// Form fields, see IDs above
const params = {
email: document.querySelector('#loginEmail').value,
password: document.querySelector('#loginPassword').value
}
const http = new XMLHttpRequest()
http.open('POST', '/login')
http.setRequestHeader('Content-type', 'application/json')
http.send(JSON.stringify(params)) // Make sure to stringify
http.onload = function() {
// Do whatever with response
alert(http.responseText)
}
}
</script>Assurez-vous que votre API backend peut analyser JSON.
Par exemple, dans Express JS:
import bodyParser from 'body-parser'
app.use(bodyParser.json())Sélectionnez le code ci-dessous et faites-le glisser dans la BARRE DE SIGNETS ( si vous ne le voyez pas, activez-le dans les paramètres du navigateur ), puis MODIFIEZ ce lien:
javascript:var my_params = prompt("Enter your parameters", "var1=aaaa&var2=bbbbb"); var Target_LINK = prompt("Enter destination", location.href); function post(path, params) { var xForm = document.createElement("form"); xForm.setAttribute("method", "post"); xForm.setAttribute("action", path); for (var key in params) { if (params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); xForm.appendChild(hiddenField); } } var xhr = new XMLHttpRequest(); xhr.onload = function () { alert(xhr.responseText); }; xhr.open(xForm.method, xForm.action, true); xhr.send(new FormData(xForm)); return false; } parsed_params = {}; my_params.split("&").forEach(function (item) { var s = item.split("="), k = s[0], v = s[1]; parsed_params[k] = v; }); post(Target_LINK, parsed_params); void(0);C'est tout! Vous pouvez maintenant visiter n'importe quel site Web et cliquer sur ce bouton dans la BARRE DE SIGNETS !
La méthode ci-dessus envoie des données à l'aide de la XMLHttpRequestméthode, vous devez donc être sur le même domaine lors du déclenchement du script. C'est pourquoi je préfère envoyer des données avec une soumission de formulaire simulée, qui peut envoyer le code à n'importe quel domaine - voici le code pour cela:
javascript:var my_params=prompt("Enter your parameters","var1=aaaa&var2=bbbbb"); var Target_LINK=prompt("Enter destination", location.href); function post(path, params) { var xForm= document.createElement("form"); xForm.setAttribute("method", "post"); xForm.setAttribute("action", path); xForm.setAttribute("target", "_blank"); for(var key in params) { if(params.hasOwnProperty(key)) { var hiddenField = document.createElement("input"); hiddenField.setAttribute("name", key); hiddenField.setAttribute("value", params[key]); xForm.appendChild(hiddenField); } } document.body.appendChild(xForm); xForm.submit(); } parsed_params={}; my_params.split("&").forEach(function(item) {var s = item.split("="), k=s[0], v=s[1]; parsed_params[k] = v;}); post(Target_LINK, parsed_params); void(0); XmlHttpRequestdans votre réponse: |
J'ai rencontré un problème similaire, en utilisant le même message et et ce lien, j'ai résolu mon problème.
var http = new XMLHttpRequest();
var url = "MY_URL.Com/login.aspx";
var params = 'eid=' +userEmailId+'&pwd='+userPwd
http.open("POST", url, true);
// Send the proper header information along with the request
//http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//http.setRequestHeader("Content-Length", params.length);// all browser wont support Refused to set unsafe header "Content-Length"
//http.setRequestHeader("Connection", "close");//Refused to set unsafe header "Connection"
// Call a function when the state
http.onreadystatechange = function() {
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(params);Ce lien a complété les informations.
var util = {
getAttribute: function (dom, attr) {
if (dom.getAttribute !== undefined) {
return dom.getAttribute(attr);
} else if (dom[attr] !== undefined) {
return dom[attr];
} else {
return null;
}
},
addEvent: function (obj, evtName, func) {
//Primero revisar attributos si existe o no.
if (obj.addEventListener) {
obj.addEventListener(evtName, func, false);
} else if (obj.attachEvent) {
obj.attachEvent(evtName, func);
} else {
if (this.getAttribute("on" + evtName) !== undefined) {
obj["on" + evtName] = func;
} else {
obj[evtName] = func;
}
}
},
removeEvent: function (obj, evtName, func) {
if (obj.removeEventListener) {
obj.removeEventListener(evtName, func, false);
} else if (obj.detachEvent) {
obj.detachEvent(evtName, func);
} else {
if (this.getAttribute("on" + evtName) !== undefined) {
obj["on" + evtName] = null;
} else {
obj[evtName] = null;
}
}
},
getAjaxObject: function () {
var xhttp = null;
//XDomainRequest
if ("XMLHttpRequest" in window) {
xhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhttp;
}
};
//START CODE HERE.
var xhr = util.getAjaxObject();
var isUpload = (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
if (isUpload) {
util.addEvent(xhr, "progress", xhrEvt.onProgress());
util.addEvent(xhr, "loadstart", xhrEvt.onLoadStart);
util.addEvent(xhr, "abort", xhrEvt.onAbort);
}
util.addEvent(xhr, "readystatechange", xhrEvt.ajaxOnReadyState);
var xhrEvt = {
onProgress: function (e) {
if (e.lengthComputable) {
//Loaded bytes.
var cLoaded = e.loaded;
}
},
onLoadStart: function () {
},
onAbort: function () {
},
onReadyState: function () {
var state = xhr.readyState;
var httpStatus = xhr.status;
if (state === 4 && httpStatus === 200) {
//Completed success.
var data = xhr.responseText;
}
}
};
//CONTINUE YOUR CODE HERE.
xhr.open('POST', 'mypage.php', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
if ('FormData' in window) {
var formData = new FormData();
formData.append("user", "aaaaa");
formData.append("pass", "bbbbb");
xhr.send(formData);
} else {
xhr.send("?user=aaaaa&pass=bbbbb");
}Essayez d'utiliser l'objet json au lieu de formdata. ci-dessous est le code qui fonctionne pour moi. formdata ne fonctionne pas non plus pour moi, c'est pourquoi j'ai trouvé cette solution.
var jdata = new Object();
jdata.level = levelVal; // level is key and levelVal is value
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "http://MyURL", true);
xhttp.setRequestHeader('Content-Type', 'application/json');
xhttp.send(JSON.stringify(jdata));
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
}Juste pour les lecteurs de fonctionnalité qui trouvent cette question. J'ai trouvé que la réponse acceptée fonctionne bien tant que vous avez un chemin donné, mais si vous le laissez vide, il échouera dans IE. Voici ce que j'ai trouvé:
function post(path, data, callback) {
"use strict";
var request = new XMLHttpRequest();
if (path === "") {
path = "/";
}
request.open('POST', path, true);
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
request.onload = function (d) {
callback(d.currentTarget.response);
};
request.send(serialize(data));
}Vous pouvez vous comme ça:
post("", {orem: ipsum, name: binny}, function (response) {
console.log(respone);
})Il y a des doublons qui touchent à cela, et personne ne l'explique vraiment. Je vais emprunter l'exemple de réponse accepté pour illustrer
http.open('POST', url, true);
http.send('lorem=ipsum&name=binny');J'ai simplifié à l'extrême (j'utilise http.onload(function() {}) place de l'ancienne méthodologie de cette réponse) à des fins d'illustration. Si vous l'utilisez tel key=valuequel , vous constaterez que votre serveur interprète probablement le corps du POST comme une chaîne et non comme des paramètres réels (c'est-à-dire que PHP n'affichera aucune $_POSTvariable). Vous devez passer l'en-tête du formulaire pour l'obtenir et le faire avanthttp.send()
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');Si vous utilisez JSON et non des données encodées URL, passez à la application/jsonplace
Cela m'a aidé car je voulais utiliser uniquement xmlHttpRequestet publier un objet en tant que données de formulaire:
function sendData(data) {
var XHR = new XMLHttpRequest();
var FD = new FormData();
// Push our data into our FormData object
for(name in data) {
FD.append(name, data[name]);
}
// Set up our request
XHR.open('POST', 'https://example.com/cors.php');
// Send our FormData object; HTTP headers are set automatically
XHR.send(FD);
}https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
paramslieu d'une chaîne comme dans jQuery?