Ik wil graag wat gegevens verzenden met een XMLHttpRequest in JavaScript.
Stel dat ik het volgende formulier in HTML heb:
<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>
Hoe kan ik het equivalent schrijven met een XMLHttpRequest in JavaScript?
Antwoord 1, autoriteit 100%
De onderstaande code laat zien hoe u dit kunt doen.
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);
Als je een object hebt/maakt, kun je het in params veranderen met de volgende code, d.w.z.:
var params = new Object();
params.myparam1 = myval1;
params.myparam2 = myval2;
// Turn the data object into an array of URL-encoded key/value pairs.
let urlEncodedData = "", urlEncodedDataPairs = [], name;
for( name in params ) {
urlEncodedDataPairs.push(encodeURIComponent(name)+'='+encodeURIComponent(params[name]));
}
Antwoord 2, autoriteit 36%
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');
Of als u op browserondersteuning kunt rekenen, kunt u 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);
Antwoord 3, autoriteit 15%
Gebruik modern JavaScript!
Ik raad aan om fetchte bekijken. Het is het ES5-equivalent en maakt gebruik van Promises. Het is veel leesbaarder en gemakkelijk aanpasbaar.
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)
);Antwoord 4, autoriteit 5%
Hier is een complete oplossing met 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>
Zorg ervoor dat uw Backend API JSON kan parseren.
Bijvoorbeeld in Express JS:
import bodyParser from 'body-parser'
app.use(bodyParser.json())
Antwoord 5, autoriteit 5%
Minimaal gebruik van FormDataom een AJAX-verzoek in te dienen
<!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>
Opmerkingen
-
Dit is geen volledig antwoord op de OP-vraag, omdat de gebruiker moet klikken om het verzoek in te dienen. Maar dit kan nuttig zijn voor mensen die op zoek zijn naar dit soort eenvoudige oplossing.
-
Dit voorbeeld is heel eenvoudig en ondersteunt de
GET-methode niet. Als je geïnteresseerd bent in meer geavanceerde voorbeelden, kijk dan eens naar de uitstekende MDN-documentatie. Zie ook vergelijkbaar antwoord over XMLHttpRequest to Post HTML Form. -
Beperking van deze oplossing: zoals aangegeven door Justin Blanken Thomas Munk(zie hun opmerkingen),
FormDatawordt niet ondersteund door IE9 en lager, en standaardbrowser op Android 2.3.
Antwoord 6, autoriteit 3%
GEEN PLUGINS NODIG!
Selecteer de onderstaande code en sleep die naar de BOOKMARK BAR(als je deze niet ziet, schakel deze dan in via de browserinstellingen), en vervolgens BEWERKsterk>die link :
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);
Dat is alles!Nu kun je elke website bezoeken en op die knop in de BOOKMARK BARklikken!
OPMERKING:
De bovenstaande methode verzendt gegevens met behulp van de xmlHttpRequest-methode, dus u moet zich in hetzelfde domein bevinden terwijl u het script activeert. Dat is waarom ik de voorkeur geef aan het verzenden van gegevens met een gesimuleerde FORM SUBMITTING, die de code naar elk domein kan verzenden – hier is de code daarvoor:
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);
Antwoord 7
Ik heb een soortgelijk probleem gehad met hetzelfde bericht en deze linkdie ik heb mijn probleem opgelost.
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);
Deze linkheeft volledige informatie.
Antwoord 8
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");
}
Antwoord 9
Er zijn enkele duplicaten die hierover gaan, en niemand gaat er echt op in. Ik zal het geaccepteerde antwoordvoorbeeld lenen om te illustreren
http.open('POST', url, true);
http.send('lorem=ipsum&name=binny');
Ik heb dit te simpel gemaakt (ik gebruik http.onload(function() {})in plaats van de oudere methode van dat antwoord) ter illustratie. Als u dit ongewijzigd gebruikt, zult u zien dat uw server de POST-body waarschijnlijk interpreteert als een tekenreeks en niet als de werkelijke key=value-parameters (dwz PHP zal geen $_POSTvariabelen). U moetde formulierheader doorgeven om dat te krijgen, en doe dat vóór http.send()
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
Als u JSON gebruikt en geen URL-gecodeerde gegevens, geeft u in plaats daarvan application/jsondoor
Antwoord 10
Probeer een json-object te gebruiken in plaats van formdata. hieronder is de code die voor mij werkt. formdata werkt ook niet voor mij, vandaar dat ik deze oplossing bedacht.
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);
}
}
Antwoord 11
Dit hielp me omdat ik alleen xmlHttpRequestwilde gebruiken en een object als formuliergegevens wilde posten:
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
Antwoord 12
Kort & modern
U kuntformulierinvoerwaarden opvangen met FormData en deze verzenden via ophalen
fetch(form.action, {method:'post', body: new FormData(form)});
Antwoord 13
Alleen voor feature-lezers die deze vraag vinden. Ik ontdekte dat het geaccepteerde antwoord prima werkt zolang je een bepaald pad hebt, maar als je het leeg laat, zal het mislukken in IE. Dit is wat ik bedacht:
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));
}
Je kunt het zo doen:
post("", {orem: ipsum, name: binny}, function (response) {
console.log(respone);
})