Enviar datos POST usando XMLHttpRequest
Me gustaría enviar algunos datos usando XMLHttpRequest en JavaScript.
Digamos que tengo el siguiente formulario en 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>
¿Cómo puedo escribir el equivalente usando XMLHttpRequest en JavaScript?
El siguiente código demuestra cómo hacer esto.
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);
En caso de que tenga/cree un objeto, puede convertirlo en parámetros usando el siguiente código, es decir:
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]));
}
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');
O si puede contar con la compatibilidad del navegador, puede utilizar 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);
¡Utilice JavaScript moderno!
Sugeriría investigar fetch. Es el equivalente a ES5 y utiliza Promesas. Es mucho más legible y fácilmente personalizable.
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)
);En Node.js, necesitarás importar fetchusando:
const fetch = require("node-fetch");
Si desea usarlo de forma sincrónica (no funciona en el ámbito superior):
const json = await fetch(url, optionalOptions)
.then(response => response.json()) // .text(), etc.
.catch((e) => {});
Más información:
Documentación de Mozilla
¿Puedo usarlo (96% noviembre de 2020)
Tutorial de David Walsh
Aquí hay una solución completa con 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>
Asegúrese de que su API de backend pueda analizar JSON.
Por ejemplo, en Express JS:
import bodyParser from 'body-parser'
app.use(bodyParser.json())
Uso mínimo de FormDatapara enviar una solicitud AJAX
<!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>
Observaciones
Esto no responde completamente a la pregunta de OP porque requiere que el usuario haga clic para enviar la solicitud. Pero esto puede resultar útil para las personas que buscan este tipo de solución sencilla.
Este ejemplo es muy simple y no admite el
GETmétodo. Si le interesan ejemplos más sofisticados, eche un vistazo a la excelente documentación de MDN . Consulte también una respuesta similar sobre XMLHttpRequest para publicar un formulario HTML .Limitación de esta solución: como lo señalaron Justin Blank y Thomas Munk (ver sus comentarios),
FormDatano es compatible con IE9 y versiones inferiores, y el navegador predeterminado es Android 2.3.
