wake-up-neo.com

Senden Sie POST Daten mit XMLHttpRequest

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?

467
Jack Greenhill

Der folgende Code veranschaulicht, wie das getan wird.

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);
664
Ed Heal
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');

Oder wenn Sie auf Browserunterstützung zählen 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);
241
uKolka

Verwenden Sie modernes JavaScript!

Ich würde vorschlagen, fetch zu untersuchen. Es ist das ES5-Äquivalent und verwendet Promises. Es ist viel lesbarer 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 fetch importieren mit:

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:

Mozilla-Dokumentation

Kann ich verwenden (93% Aug 2019)

Matt Walsh Tutorial

56
Gibolt

Minimale Verwendung von FormData zum Senden einer AJAX -Anforderung

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

Bemerkungen

  1. Hiermit wird die OP-Frage nicht vollständig beantwortet, da der Benutzer klicken muss, um die Anforderung zu übermitteln. Dies kann jedoch nützlich sein, wenn Sie nach einer solchen einfachen Lösung suchen.

  2. Dieses Beispiel ist sehr einfach und unterstützt die Methode GET nicht. Wenn Sie an anspruchsvolleren Beispielen interessiert sind, schauen Sie sich bitte die ausgezeichnete MDN-Dokumentation an. Siehe auch ähnliche Antwort zu XMLHttpRequest to Post HTML Form .

  3. Einschränkung dieser Lösung: Wie von Justin Blank und Thomas Munk (siehe deren Kommentare) hervorgehoben, wird FormData von IE9 und niedriger sowie vom Standardbrowser nicht unterstützt am Android 2.3.

32
olibre

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())
28
agm1984

KEINE PLUGINS BENÖTIGT!

Ziehen Sie einfach einen Link (z. B. DIESER LINK ) in die LESEZEICHENLEISTE (wenn Sie ihn nicht sehen, aus den Browsereinstellungen aktivieren), dann _ _ bearbeiten diesen Link:

enter image description here

und füge Javascript ein:

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


HINWEIS:

Die obige Methode sendet Daten mit der XMLHttpRequest -Methode, daher müssen Sie sich beim Auslösen des Skripts in derselben Domäne befinden. Aus diesem Grund bevorzuge ich das Senden von Daten mit einer simulierten FORMULARABGABE, die 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); 
24
T.Todua

Ich habe ein ähnliches Problem mit dem gleichen Beitrag und und diesem Link Ich habe mein Problem behoben.

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

Dies link hat die Information vervollständigt.

5
Laxman G
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");
}
4
toto

Nur für Feature-Reader, die diese Frage finden. Ich fand, dass die akzeptierte Antwort gut funktioniert, solange Sie einen bestimmten Pfad haben, aber wenn Sie es leer lassen, wird es im IE fehlschlagen. 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));
}

Sie können es so mögen:

post("", {orem: ipsum, name: binny}, function (response) {
    console.log(respone);
})
0
Sebastian Td

Es gibt einige Duplikate, die das berühren, und niemand erklärt es wirklich. Ich werde das akzeptierte Antwortbeispiel ausleihen, um es zu veranschaulichen

http.open('POST', url, true);
http.send('lorem=ipsum&name=binny');

Ich habe dies zu stark vereinfacht (ich verwende http.onload(function() {}) anstelle der älteren Methode dieser Antwort), um dies zu veranschaulichen. Wenn Sie diesen Zustand verwenden, interpretiert Ihr Server den Body POST wahrscheinlich als Zeichenfolge und nicht als aktuelle Parameter key=value (dh PHP wird dies nicht tun) alle $_POST Variablen anzeigen). Sie müssen übergeben den Formularkopf, um das zu erhalten, und tun das vor http.send()

http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

Wenn Sie JSON und keine URL-codierten Daten verwenden, übergeben Sie stattdessen application/json

0
Machavity