使用XMLHttpRequest发送POST数据
我想用JavaScript中的XMLHttpRequest发送一些数据。
假设我在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>
我如何在JavaScript中使用XMLHttpRequest编写等价物？
下面的代码演示了如何做到这一点。
var http = new XMLHttpRequest();
var url = "get_data.php";
var params = "lorem=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);
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);
最少使用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发布HTML表单的类似答案。
此解决方案的限制：正如Justin Blank和Thomas Munk（请参阅他们的评论）所指出的， FormData不受IE9及更低版本和Android 2.3默认浏览器的支持。
上一篇: Send POST data using XMLHttpRequest
下一篇: XmlHttpRequest error: Origin null is not allowed by Access