Siųsti POST duomenis naudodami XMLHttpRequest

Norėčiau siųsti kai kuriuos duomenis, naudojant XMLHttpRequest javascript'e.

Tarkime, turiu šią formą 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> 

Kaip rašyti ekvivalentą naudojant XMLHttpRequest javascript'e?

393
15 марта '12 в 5:09 2012-03-15 05:09 Jack Greenhill paklausė kovo 15 d., 12:09 2012-03-15 05:09
@ 8 atsakymai

Toliau pateikiamas kodas rodo, kaip tai padaryti.

 var http = new XMLHttpRequest(); var url = 'get_data.php'; var params = 'orem=ipsum 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); 
571
15 марта '12 в 5:12 2012-03-15 05:12 atsakymas suteiktas Edui Healui kovo 15 d., 12:12 2012-03-15 05:12
 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> 

Arba, jei galite tikėtis naršyklės palaikymo, galite naudoti „ FormData strong“ :

border=0
 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); 
213
09 марта '13 в 19:21 2013-03-09 19:21 atsakymas pateikiamas uKolka kovo 9 d. 13 val. 19:21 2013-03-09 19:21

Minimalus FormData norint siųsti AJAX užklausą

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

pastabas

  1. Tai ne visiškai atsako į OP klausimą, nes vartotojas turi spustelėti, kad paprašytų užklausos. Tačiau tai gali būti naudinga žmonėms, kurie ieško tokio paprasto sprendimo.

  2. Šis pavyzdys yra labai paprastas ir nepalaiko GET metodo. Jei jus domina sudėtingesni pavyzdžiai, patikrinkite puikų MDN dokumentaciją . Taip pat žr. Panašų atsakymą apie XMLHttpRequest, kad išsiųstumėte HTML formą .

  3. Šio sprendimo apribojimas: Kaip pažymėjo Justinas Blankas ir Thomasas Mankas (žr. Jų komentarus), „ FormData nepalaiko IE9 ir žemiau, ir numatytąją naršyklę „Android“ 2.3.

30
07 нояб. Atsakymas pateikiamas olibre 07.11 . 2013-11-07 17:17 '13, 17:17, 2013-11-07 17:17

Naudokite šiuolaikinį javascript!

Aš siūlau pažvelgti į fetch . Tai atitinka ES5 ir naudojasi pažadais. Tai daug lengviau skaitoma ir lengvai konfigūruojama.

29
06 авг. atsakymą pateikė Gibolt 06 rugpjūtis. 2017-08-06 10:14 '17, 10:14 2017-08-06 10:14

Nėra mažai sričių!

Tiesiog vilkite ir nuleiskite bet kokią nuorodą (t. Y. Šį nuorodą) į BOOKMARK BAR (jei nematote, įjunkite naršyklės parinktis), tada CHANGE that link:

2019

Čia rasite išsamų sprendimą su 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> 

Įsitikinkite, kad „Backend“ API gali išanalizuoti JSON.

Pavyzdžiui, „Express JS“:

 import bodyParser from 'body-parser' app.use(bodyParser.json()) 
13
08 сент. Atsakymas pateikiamas agm1984 08 sep . 2017-09-08 12:11 '17, 12:11 pm 2017-09-08 12:11

Buvau panašioje problemoje, naudodamas tą patį įrašą, ir šią nuorodą išsprendžiau.

  var http = new XMLHttpRequest(); var url = "MY_URL.Com/login.aspx"; var params = 'eid=' +userEmailId+' 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); 

Ši nuoroda baigta.

3
26 сент. atsakymą pateikė Laxman G 26 sep. 2016-09-26 16:12 '16, 16:12 pm 2016-09-26 16:12
 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 } 
2
02 июля '16 в 4:57 2016-07-02 04:57 atsakymas duotas toto 02 liepos 16 d. 4:57 2016-07-02 04:57

Kiti klausimai apie „ žymes arba „ Užduoti klausimą“