使⽤XMLHttpRequest发送POST数据
本⽂翻译⾃：
I'd like to send some data using an XMLHttpRequest in JavaScript. 我想使⽤JavaScript中的XMLHttpRequest发送⼀些数
我想使⽤JavaScript中的XMLHttpRequest发送⼀些数据。
Say I have the following form in HTML: 说我的HTML形式如下：
说我的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>
How can I write the equivalent using an XMLHttpRequest in JavaScript? 如何在JavaScript中使⽤XMLHttpRequest编写等
如何在JavaScript中使⽤XMLHttpRequest编写等效项？
#1楼
#2楼
var xhr = new XMLHttpRequest();
xhr.open('POST', 'somewhere', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// do something to response
console.sponseText);
};
xhr.send('user=person&pwd=password&organization=place&requiredkey=key');
Or if you can count on browser support you could use : 或者，如果您可以依靠浏览器⽀持，则可以使⽤ ：
或者，如果您可以依靠浏览器⽀持，则可以使⽤ ：
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);
// do something to response
console.sponseText);
};
xhr.send(data);
#3楼
Minimal use of FormData to submit an AJAX request最少使⽤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.open (hod, 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>
Remarks备注
1. This does not fully answer the OP question because it requires the user to click in order to submit the request. 这不能
这不能
请求。 But this may be useful to people searching for this kind of simple 完全回答OP问题，因为它要求⽤户单击才能提交请求。
solution. 但这对于寻这种简单解决⽅案的⼈们可能有⽤。
但这对于寻这种简单解决⽅案的⼈们可能有⽤。
⽅法。 If you are
2. This example is very simple and does not support the GET method. 此⽰例⾮常简单，不⽀持
此⽰例⾮常简单，不⽀持GET⽅法。
interesting by more sophisticated examples, please have a look at the excellent . 如果您对更复杂的⽰例感兴趣，请查看出
如果您对更复杂的⽰例感兴趣，请查看出另请参见 。
⾊的 。 See also . 另请参见 。
⾊的 。
3. Limitation of this solution: As pointed out by and (see their comments), FormData is not supported by IE9 and lower,
and default browser on Android 2.3. 此解决⽅案的局限性：正如和 （请参阅他们的评论）所指出的那样，IE9及更低版本以
此解决⽅案的局限性：正如和 （请参阅他们的评论）所指出的那样，IE9及更低版本以及Android 2.3上的默认浏览器均不⽀持FormData 。
#4楼
var util = {
getAttribute: function (dom, attr) {
if (Attribute !== undefined) {
Attribute(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) {
} else if (obj.attachEvent) {
obj.attachEvent(evtName, func);
} else {
if (Attribute("on" + evtName) !== undefined) {
obj["on" + evtName] = func;
} else {
obj[evtName] = func;
}
}
},
removeEvent: function (obj, evtName, func) {
if (veEventListener) {
} else if (obj.detachEvent) {
obj.detachEvent(evtName, func);
} else {
if (Attribute("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 = AjaxObject();
var isUpload = (xhr && ('upload' in xhr) && ('onprogress' in xhr.upload));
if (isUpload) {
util.addEvent(xhr, "progress", Progress());
util.addEvent(xhr, "loadstart", LoadStart);
util.addEvent(xhr, "abort", Abort);
}
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 () {
onReadyState: function () {
var state = adyState;
var httpStatus = xhr.status;
if (state === 4 && httpStatus === 200) {
//Completed success.
var data = sponseText;
}
}
};
//CONTINUE YOUR CODE HERE.
xhr.open('POST', 'mypage.php', true);
submittingxhr.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");
}
#5楼
NO PLUGINS NEEDED!⽆需插件！
Select the below code and drag that into in BOOKMARK BAR ( if you don't see it, enable from Browser Settings ), then EDIT
that link : 选择以下代码并将其拖到“ 书签栏”中 （
选择以下代码并将其拖到“ 书签栏”中 （ 如果看不到，请从“浏览器设置”中启⽤ ），然后编辑该链接：
javascript:var my_params = prompt("Enter your parameters", "var1=aaaa&var2=bbbbb"); var Target_LINK = prompt("Enter destination", location.href); function po That's all! 就这样！
现在，您可以访问任何⽹站，然就这样！ Now you can visit any website, and click that button in BOOKMARK BAR ! 现在，您可以访问任何⽹站，然
后在BOOKMARK BAR中单击该按钮！
NOTE：注意：
The above method sends data using XMLHttpRequest method, so, you have to be on the same domain while triggering the
script. 上⾯的⽅法使⽤
上⾯的⽅法使⽤XMLHttpRequest⽅法发送数据，因此，在触发脚本时，您必须位于同⼀域中。
⽅法发送数据，因此，在触发脚本时，您必须位于同⼀域中。 That's why I prefer sending
data with a simulated FORM SUBMITTING, which can send the code to any domain - here is code for that: 这就是为什么我更
这就是为什么我更
喜欢使⽤模拟的FORM SUBMITTING发送数据，该表单可以将代码发送到任何域-这是该代码：
javascript:var my_params=prompt("Enter your parameters","var1=aaaa&var2=bbbbb"); var Target_LI
NK=prompt("Enter destination", location.href); function post
#6楼
I have faced similar problem, using the same post and and this I have resolved my issue. 我使⽤相同的帖⼦也遇到了类似的问
我使⽤相同的帖⼦也遇到了类似的问
题，并且此已经解决了我的问题。
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
adyState == 4 && http.status == 200) {
sponseText);
}
}
http.send(params);
This has completed information. 该具有完整的信息。
该具有完整的信息。