Ich möchte einige Daten mit einem XMLHttpRequest in JavaScript senden.
Angenommen, ich habe das folgende Formular in 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>
Wie kann ich das Äquivalent mit einem XMLHttpRequest in JavaScript schreiben?
Antworten:
Der folgende Code zeigt, wie das geht.
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);
Connectionund Content-LengthHeader können nicht gesetzt werden. Es wird "Weigert sich, den unsicheren Header auf" Inhaltslänge "zu setzen" angezeigt. Siehe 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');
Wenn Sie sich auf die Browserunterstützung verlassen können, können Sie FormData verwenden :
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);und http.setRequestHeader("Connection", "close");. Werden sie gebraucht? Werden sie vielleicht nur in bestimmten Browsern benötigt? (Es gibt einen Kommentar auf dieser anderen Seite, der besagt, dass das Setzen des Content-Length-Headers "genau das war, was benötigt wurde")
Content-Typeautomatisch ändert multipart/form-data. Dies hat schwerwiegende Auswirkungen auf die Serverseite und darauf, wie auf die Informationen dort zugegriffen wird.
Ich würde vorschlagen, nachzuschauen fetch. Es ist das ES5-Äquivalent und verwendet Versprechen. Es ist viel besser lesbar und leicht anpassbar.
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)
);In Node.js müssen Sie Folgendes importieren fetch:
const fetch = require("node-fetch");Wenn Sie es synchron verwenden möchten (funktioniert nicht im oberen Bereich):
const json = await fetch(url, optionalOptions)
.then(response => response.json()) // .text(), etc.
.catch((e) => {});
Mehr Info:
function()Beispiele hinzugefügt, falls Sie es nicht bevorzugen =>. Sie sollten unbedingt modernes JS verwenden, um die Entwicklererfahrung zu vereinfachen. Sich um einen kleinen Prozentsatz der Leute zu
thisSchlüsselwort. Ich möchte das erwähnen, aber ich hasse auch heimlich Leute, die thisArchitektur und Vererbungsarchitektur anstelle von Funktionsfabriken verwenden. Vergib mir, ich bin Knoten.
thisdie Pest, und so sollte es auch jeder lesen this.
this.
FormData, um eine AJAX-Anfrage zu senden<!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>
Dadurch wird die OP-Frage nicht vollständig beantwortet, da der Benutzer klicken muss, um die Anforderung zu senden. Dies kann jedoch für Personen nützlich sein, die nach einer solchen einfachen Lösung suchen.
Dieses Beispiel ist sehr einfach und unterstützt die GETMethode nicht. Wenn Sie an anspruchsvolleren Beispielen interessiert sind, schauen Sie sich bitte die hervorragende MDN-Dokumentation an . Siehe auch ähnliche Antwort zu XMLHttpRequest zum Posten von HTML-Formularen .
Einschränkung dieser Lösung: Wie von Justin Blank und Thomas Munk (siehe ihre Kommentare) hervorgehoben, FormDatawird sie von IE9 und niedriger und dem Standardbrowser unter Android 2.3 nicht unterstützt.
FormDatadies von vielen Browsern außer IE9 und Android 2.3 (und OperaMini, aber letzteres ist nicht weit verbreitet) unterstützt wird. Prost ;-)
onsubmit="return submitForm(this);"der Benutzer ansonsten zur URL in der Anforderung umgeleitet wird.
false. Bei trueRücksendung wird die ursprüngliche (unerwünschte) POST-Anfrage gesendet! Ihre Antwort ist richtig, entschuldigen Sie die Verwirrung.
Hier ist eine Komplettlösung mit
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>Stellen Sie sicher, dass Ihre Backend-API JSON analysieren kann.
Zum Beispiel in Express JS:
import bodyParser from 'body-parser'
app.use(bodyParser.json())Wählen Sie den Code unten und ziehen Sie, dass in in der Lesezeichenleiste ( wenn Sie es nicht sehen, aktivieren Sie auf dem Browser - Einstellungen ), dann EDIT dass 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);Das ist alles! Jetzt können Sie jede Website besuchen und auf diese Schaltfläche in der BOOKMARK BAR klicken !
Die obige Methode sendet Daten mit der XMLHttpRequestMethode. Sie müssen sich also beim Auslösen des Skripts in derselben Domäne befinden. Deshalb sende ich lieber Daten mit einem simulierten FORMULAR, das den Code an jede Domain senden kann - hier ist der Code dafür:
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); XmlHttpRequestin Ihrer Antwort: |
Ich habe ein ähnliches Problem mit demselben Beitrag und diesem Link. Ich habe mein Problem behoben.
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);Dieser Link hat Informationen vervollständigt.
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");
}Versuchen Sie, ein json-Objekt anstelle von Formulardaten zu verwenden. Unten ist der Code, der für mich funktioniert. formdata funktioniert auch bei mir nicht, daher habe ich diese Lösung gefunden.
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);
}
}Nur für Feature-Reader, die diese Frage finden. Ich habe festgestellt, dass die akzeptierte Antwort einwandfrei funktioniert, solange Sie einen bestimmten Pfad haben. Wenn Sie ihn jedoch leer lassen, schlägt er im IE fehl. Folgendes habe ich mir ausgedacht:
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));
}Du kannst es dir so gefallen:
post("", {orem: ipsum, name: binny}, function (response) {
console.log(respone);
})Es gibt einige Duplikate, die dies berühren, und niemand erklärt es wirklich. Ich werde das akzeptierte Antwortbeispiel zur Veranschaulichung ausleihen
http.open('POST', url, true);
http.send('lorem=ipsum&name=binny');Ich habe dies http.onload(function() {})zur Veranschaulichung zu stark vereinfacht (ich verwende anstelle der älteren Methodik dieser Antwort). Wenn Sie dies so verwenden, wie es ist, werden Sie feststellen, dass Ihr Server den POST-Text wahrscheinlich als Zeichenfolge und nicht als tatsächliche key=valueParameter interpretiert (dh PHP zeigt keine $_POSTVariablen an). Sie müssen den Formular-Header übergeben, um das zu erhalten, und das vorher tunhttp.send()
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');Wenn Sie JSON und keine URL-codierten Daten verwenden, übergeben Sie application/jsonstattdessen
Dies hat mir geholfen, da ich nur xmlHttpRequestein Objekt als Formulardaten verwenden und veröffentlichen wollte:
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
paramsanstelle einer Zeichenfolge wie in jQuery einzusenden ?