javascript - example - xmlhttprequest open
Enviar datos POST utilizando XMLHttpRequest (8)
Me gustaría enviar algunos datos utilizando un 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 un XMLHttpRequest en JavaScript?
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())
¡NO SE NECESITAN PLUGINS!
Simplemente arrastre cualquier enlace (es decir, ESTE ENLACE ) en BOOKMARK BAR (si no lo ve, habilítelo desde la Configuración del navegador), luego EDITE ese enlace:
e inserte el código javascript:
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);
¡Eso es todo! ¡Ahora puedes visitar cualquier sitio web y hacer clic en ese botón en BOOKMARK BAR !
NOTA:
El método anterior envía datos utilizando el método XMLHttpRequest , por lo tanto, tiene que estar en el mismo dominio mientras activa el script. Es por eso que prefiero enviar datos con un FORMULARIO DE PRESENTACIÓN simulado, que puede enviar el código a cualquier dominio; aquí hay un código para eso:
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);
¡Utiliza JavaScript moderno!
Yo sugeriría buscar en fetch . Es el equivalente a ES5 y utiliza Promesas. Es mucho más legible y fácilmente personalizable.
<!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>
Más información:
Uso mínimo de FormData para enviar una solicitud AJAX
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)
);
Observaciones
Esto no responde completamente a la pregunta del OP porque requiere que el usuario haga clic para enviar la solicitud. Pero esto puede ser útil para las personas que buscan este tipo de solución simple.
Este ejemplo es muy simple y no admite el método
GET. Si le interesan los ejemplos más sofisticados, eche un vistazo a la excelente documentación de MDN . Consulte también la respuesta similar sobre XMLHttpRequest to Post HTML Form .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 en Android 2.3.
El siguiente código muestra 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);
Me he enfrentado a un problema similar, usando la misma publicación y este link he resuelto mi problema.
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);
Este link ha completado la información.
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");
}
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 puedes contar con el soporte del navegador, puedes usar 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);