javascript - XMLHttpRequest 发布 HTML 表单

Question

当前设置
我有一个这样的 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");
}

例如，说 javascript 方法 demoRequest()单击表单的提交按钮时调用，如何从该方法访问表单的值，然后将其添加到 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;
                            });

Answer 1

POST 字符串格式如下:

name=value&name2=value2&name3=value3

因此，您必须获取所有名称、它们的值并将它们放入该格式。
您可以通过调用 document.getElementById() 迭代所有输入元素或获取特定元素.

警告:您必须使用 encodeURIComponent() 对于所有名称，尤其是对于值，以便可能 &包含在字符串中不会破坏格式。

例子:

var input = document.getElementById("my-input-id");
var inputData = encodeURIComponent(input.value);

request.send("action=dosomething&" + input.name + "=" + inputData);

另一个更简单的选择是使用 FormData对象。这样的对象可以保存名称和值对。

幸运的是，我们可以构造一个 FormData现有表单中的对象，我们可以将其直接发送到 XMLHttpRequest的方法发送():

var formData = new FormData( document.getElementById("my-form-id") );
xhr.send(formData);