JavaScript – XMLHttpRequest发布HTML表单

当前设置

我有一个这样的HTML表单.

<form id="demo-form" action="POST" method="post-handler.PHP">
   <input type="text" name="name" value="prevIoUsValue"/>
   <button type="submit" name="action" value="dosomething">Update</button>
</form>

我可能在一个页面上有许多这些表单.

我的问题

如何异步提交此表单,而不是重定向或刷新页面.我知道如何使用XMLHttpRequest.我有一个问题是从JavaScript中检索数据,然后放入一个后期请求字符串.这是我当前用于我的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;
                            });

解决方法

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的方法send()：

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

JavaScript – XMLHttpRequest发布HTML表单

解决方法

猜你在找的JavaScript相关文章