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