ฉันต้องการส่งข้อมูลบางอย่างโดยใช้ XMLHttpRequest ใน JavaScript
ว่าฉันมีแบบฟอร์มต่อไปในรูปแบบ 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>ฉันจะเขียนเทียบเท่าโดยใช้ XMLHttpRequest ใน JavaScript ได้อย่างไร
คำตอบ:
โค้ดข้างล่างนี้แสดงให้เห็นถึงวิธีการทำเช่นนี้
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);ConnectionและContent-Lengthไม่สามารถตั้งค่าส่วนหัวได้ มันจะบอกว่า "ปฏิเสธที่จะตั้งค่าส่วนหัวที่ไม่ปลอดภัย" ความยาวเนื้อหา "" ดูstackoverflow.com/a/2624167/632951
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');หรือถ้าคุณสามารถนับการสนับสนุนเบราว์เซอร์คุณสามารถใช้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);http.setRequestHeader("Content-length", params.length); http.setRequestHeader("Connection", "close");พวกเขาต้องการ? บางทีอาจจำเป็นสำหรับเบราว์เซอร์บางตัวเท่านั้น (มีความคิดเห็นในหน้าอื่นที่บอกว่าการตั้งค่าส่วนหัวของเนื้อหาความยาวคือ "สิ่งที่จำเป็นจริงๆ")
Content-Type multipart/form-dataสิ่งนี้มีความเกี่ยวข้องอย่างร้ายแรงกับฝั่งเซิร์ฟเวอร์และวิธีการเข้าถึงข้อมูลในนั้น
fetchผมขอแนะนำให้มองเข้าไปใน มันเทียบเท่า ES5 และใช้สัญญา สามารถอ่านและปรับแต่งได้ง่ายขึ้น
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)
);ใน Node.js คุณจะต้องนำเข้าfetchโดยใช้:
const fetch = require("node-fetch");หากคุณต้องการใช้พร้อมกัน (ไม่ทำงานในขอบเขตด้านบน):
const json = await fetch(url, optionalOptions)
.then(response => response.json()) // .text(), etc.
.catch((e) => {});ข้อมูลเพิ่มเติม:
thisคำหลัก ฉันชอบพูดถึงสิ่งนั้น แต่ฉันก็เกลียดคนที่แอบใช้thisและสถาปัตยกรรมการรับมรดกแทนโรงงานฟังก์ชั่น ยกโทษให้ฉันฉันเป็นโหนด
this this
thisหลีกเลี่ยง
FormDataเพื่อส่งคำขอ 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>สิ่งนี้ไม่ตอบคำถาม OP อย่างสมบูรณ์เนื่องจากต้องการให้ผู้ใช้คลิกเพื่อส่งคำขอ แต่สิ่งนี้อาจมีประโยชน์สำหรับผู้ที่ค้นหาวิธีแก้ปัญหาแบบง่าย ๆ
ตัวอย่างนี้ง่ายมากและไม่สนับสนุนGETวิธีการ หากคุณมีความน่าสนใจโดยตัวอย่างที่มีความซับซ้อนเพิ่มเติมกรุณาดูได้ที่ยอดเยี่ยมเอกสาร MDN ดูเพิ่มเติมคำตอบคล้ายกันเกี่ยวกับXMLHttpRequest ที่จะโพสต์ฟอร์ม
ข้อ จำกัด ของการแก้ปัญหานี้: ตามที่Justin BlankและThomas Munkชี้ให้เห็น(ดูความคิดเห็น) FormDataไม่สนับสนุนโดย IE9 และรุ่นที่ต่ำกว่าและเบราว์เซอร์เริ่มต้นบน Android 2.3
FormDataได้รับการสนับสนุนจากเบราว์เซอร์จำนวนมากยกเว้น IE9 และ Android 2.3 (และ OperaMini แต่สุดท้ายไม่ได้ใช้กันอย่างแพร่หลาย) Cheers ;-)
onsubmit="return submitForm(this);"มิฉะนั้นผู้ใช้จะได้รับการเปลี่ยนเส้นทางไปยัง URL ในคำขอ
falseจะถูกส่งไปแน่นอนเมื่อคุณกลับมา หากtrueถูกส่งคืนคำขอ POST ต้นฉบับ (ไม่ต้องการ) จะถูกส่ง! คำตอบของคุณถูกต้องขออภัยในความสับสน
นี่คือทางออกที่สมบูรณ์ด้วย
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>ตรวจสอบให้แน่ใจว่า Backend API ของคุณสามารถวิเคราะห์ JSON
ตัวอย่างเช่นใน Express JS:
import bodyParser from 'body-parser'
app.use(bodyParser.json())เลือกรหัสด้านล่างและลากไปไว้ในแถบคั่นหน้า ( หากคุณไม่เห็นให้เปิดใช้งานจากการตั้งค่าเบราว์เซอร์ ) จากนั้นแก้ไขลิงก์:
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);นั่นคือทั้งหมด! ตอนนี้คุณสามารถเยี่ยมชมเว็บไซต์ใด ๆ และคลิกที่ปุ่มในแถบคั่นหน้า !
วิธีการข้างต้นส่งข้อมูลโดยใช้XMLHttpRequestวิธีการดังนั้นคุณจะต้องอยู่ในโดเมนเดียวกันในขณะที่เรียกสคริปต์ นั่นเป็นเหตุผลที่ฉันชอบส่งข้อมูลด้วยแบบจำลองการส่งแบบจำลองซึ่งสามารถส่งรหัสไปยังโดเมนใดก็ได้ - นี่คือรหัสสำหรับ:
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); XmlHttpRequestคำตอบของคุณ: |
ฉันประสบปัญหาคล้ายกันโดยใช้โพสต์เดียวกันและลิงค์นี้ฉันได้แก้ไขปัญหาของฉันแล้ว
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);ลิงค์นี้มีข้อมูลที่สมบูรณ์
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");
}ลองใช้วัตถุ json แทน formdata ด้านล่างเป็นรหัสที่ใช้งานได้สำหรับฉัน formdata ไม่ได้ผลสำหรับฉันเช่นกันดังนั้นฉันจึงคิดวิธีแก้ปัญหานี้ขึ้นมา
var jdata = new Object();
jdata.level = levelVal; // level is key and levelVal is value
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "http://MyURL", true);
xhttp.setRequestHeader('Content-Type', 'application/json');
xhttp.send(JSON.stringify(jdata));
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
console.log(this.responseText);
}
}เพียงแค่ผู้อ่านฟีเจอร์หาคำถามนี้ ฉันพบว่าคำตอบที่ได้รับการยอมรับทำงานได้ดีตราบใดที่คุณมีเส้นทางที่กำหนด แต่ถ้าคุณปล่อยว่างไว้มันจะล้มเหลวใน IE นี่คือสิ่งที่ฉันมาด้วย:
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));
}คุณสามารถชอบ:
post("", {orem: ipsum, name: binny}, function (response) {
console.log(respone);
})มีบางส่วนที่ซ้ำซ้อนที่สัมผัสกับสิ่งนี้และไม่มีใครอธิบายอย่างแท้จริง ฉันจะยืมตัวอย่างคำตอบที่ได้รับการยอมรับเพื่อแสดง
http.open('POST', url, true);
http.send('lorem=ipsum&name=binny');ฉันใช้http.onload(function() {})คำนี้เกินความเป็นจริง (ฉันใช้แทนวิธีการแบบเก่าของคำตอบนั้น) เพื่อเป็นภาพประกอบ หากคุณใช้สิ่งนี้ตามที่เป็นอยู่คุณจะพบว่าเซิร์ฟเวอร์ของคุณอาจตีความเนื้อความ POST เป็นสตริงและไม่ใช่key=valueพารามิเตอร์จริง(เช่น PHP จะไม่แสดง$_POSTตัวแปรใด ๆ) คุณต้องผ่านส่วนหัวของแบบฟอร์มเพื่อรับสิ่งนั้นและทำสิ่งนั้นก่อนหน้าhttp.send()
http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');หากคุณกำลังใช้ JSON และไม่ใช่ข้อมูลที่เข้ารหัส URL ให้ส่งapplication/jsonแทน
สิ่งนี้ช่วยฉันในขณะที่ฉันต้องการใช้เท่านั้นxmlHttpRequestและโพสต์วัตถุเป็นข้อมูลฟอร์ม:
function sendData(data) {
var XHR = new XMLHttpRequest();
var FD = new FormData();
// Push our data into our FormData object
for(name in data) {
FD.append(name, data[name]);
}
// Set up our request
XHR.open('POST', 'https://example.com/cors.php');
// Send our FormData object; HTTP headers are set automatically
XHR.send(FD);
}https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
paramsแทนที่จะเป็นสตริงเหมือนใน jQuery?