XMLHttpRequest 发布 HTML 表单 [英] XMLHttpRequest to Post HTML Form
问题描述
当前设置
我有一个这样的 HTML 表单.
I have an HTML form like so.
<form id="demo-form" action="post-handler.php" method="POST">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething">Update</button>
</form>
我可能在一个页面上有很多这样的表单.
I may have many of these forms on a page.
我的问题
如何异步提交此表单而不被重定向或刷新页面?我知道如何使用 XMLHttpRequest
.我遇到的问题是从 javascript 中的 HTML 中检索数据,然后将其放入发布请求字符串中.这是我目前用于 zXMLHttpRequest` 的方法.
How do I submit this form asynchronously and not get redirected or refresh the page? I know how to use XMLHttpRequest
. The issue I have is retrieving the data from the HTML in javascript to then put into a post request string. Here is the method I'm currently using for my zXMLHttpRequest`'s.
function getHttpRequest() {
var xmlhttp;
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
return xmlhttp;
}
function demoRequest() {
var request = getHttpRequest();
request.onreadystatechange=function() {
if (request.readyState == 4 && request.status == 200) {
console.log("Response Received");
}
}
request.open("POST","post-handler.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
request.send("action=dosomething");
}
例如,假设在单击表单的提交按钮时调用了 javascript 方法 demoRequest()
,我如何从该方法访问表单的值,然后将其添加到 XMLHttpRequest
?
So for example, say the javascript method demoRequest()
was called when the form's submit button was clicked, how do I access the form's values from this method to then add it to the XMLHttpRequest
?
编辑
试图从下面的答案中实现解决方案,我已经像这样修改了我的表单.
Trying to implement a solution from an answer below I have modified my form like so.
<form id="demo-form">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>
但是,在单击按钮时,它仍然试图将我重定向(到我不确定的地方)并且我的方法没有被调用?
However, on clicking the button, it's still trying to redirect me (to where I'm unsure) and my method isn't called?
按钮事件监听器
document.getElementById('updateBtn').addEventListener('click', function (evt) {
evt.preventDefault();
// Do something
updateProperties();
return false;
});
推荐答案
POST 字符串格式如下:
The POST string format is the following:
name=value&name2=value2&name3=value3
因此,您必须获取所有名称、它们的值并将它们放入该格式.您可以迭代所有输入元素或通过调用 document.getElementById()
来获取特定元素.
警告:您必须使用encodeURIComponent()
用于所有名称,尤其是值,以便字符串中可能包含的 &
不会破坏格式.
Warning: You have to use encodeURIComponent()
for all names and especially for the values so that possible &
contained in the strings do not break the format.
示例:
var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);
request.send("action=dosomething&" + input.name + "=" + inputData);
另一个更简单的选择是使用 FormData
对象.这样的对象可以保存名称和值对.
Another far simpler option would be to use FormData
objects. Such an object can hold name and value pairs.
幸运的是,我们可以从现有表单构造一个 FormData
对象,然后将其直接发送到 XMLHttpRequest
的方法 send():
Luckily, we can construct a FormData
object from an existing form and we can send it it directly to XMLHttpRequest
's method send():
var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);
这篇关于XMLHttpRequest 发布 HTML 表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!