POST-Daten mit XMLHttpRequest senden

Question

Ich möchte einige Daten mit einem XMLHttpRequest in JavaScript zu 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?

Answer 1

Der nachstehende 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);

Wenn Sie ein Objekt haben/erstellen, können Sie es mit folgendem Code in Params umwandeln, d.h:

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]));
}

Answer 2

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 Unterstützung Ihres Browsers verlassen können, können Sie auch FormularDaten :

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);

Answer 3

Verwenden Sie modernes JavaScript!

Ich würde vorschlagen, dass Sie sich mit fetch . 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 Folgendes importieren fetch verwenden:

const fetch = require("node-fetch");

Wenn Sie es synchron verwenden wollen (funktioniert nicht im Top-Scope):

const json = await fetch(url, optionalOptions)
  .then(response => response.json()) // .text(), etc.
  .catch((e) => {});

Mehr Infos:

Mozilla-Dokumentation

Kann ich verwenden (96% Nov 2020)

David Walsh Tutorial

Answer 4

Hier ist eine vollständige Lö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 parsen kann.

Zum Beispiel in Express JS:

import bodyParser from 'body-parser'
app.use(bodyParser.json())

Answer 5

Minimale Verwendung von FormData um eine AJAX-Anfrage zu stellen

<!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. Dies ist keine vollständige Antwort auf die Frage des Auftraggebers, da der Benutzer klicken muss, um die Anfrage zu übermitteln. Aber es kann für Leute, die nach dieser Art von einfacher Lösung suchen, nützlich sein.

2. Dieses Beispiel ist sehr einfach und unterstützt nicht die GET Methode. Wenn Sie an anspruchsvolleren Beispielen interessiert sind, schauen Sie sich bitte die hervorragende MDN-Dokumentation . Siehe auch ähnliche Antwort über XMLHttpRequest zum Posten eines HTML-Formulars .

3. Einschränkung dieser Lösung: Wie von Justin Blank y Thomas Munk (siehe ihre Kommentare), FormData wird von IE9 und niedrigeren Versionen sowie vom Standardbrowser unter Android 2.3 nicht unterstützt.