当前设置
我有一个像这样的 HTML 表单。
<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>
我可能在一个页面上有很多这样的表格。
我的问题
如何异步提交此表单而不被重定向或刷新页面？我知道如何使用XMLHttpRequest. 我遇到的问题是从 javascript 中的 HTML 中检索数据，然后将其放入发布请求字符串中。这是我目前用于 zXMLHttpRequest` 的方法。
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");
}
例如，假设在demoRequest()单击表单的提交按钮时调用了 javascript 方法，我如何从该方法访问表单的值，然后将其添加到XMLHttpRequest?
编辑
试图从下面的答案中实现解决方案，我已经像这样修改了我的表单。
<form id="demo-form">
<input type="text" name="name" value="previousValue"/>
<button type="submit" name="action" value="dosomething" onClick="demoRequest()">Update</button>
</form>
但是，在单击按钮时，它仍然试图将我重定向（到我不确定的地方）并且我的方法没有被调用？
按钮事件监听器
document.getElementById('updateBtn').addEventListener('click', function (evt) {
evt.preventDefault();
// Do something
updateProperties();
return false;
});