当前设置
我有这样的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中的HTML检索数据,然后将其放入发布请求字符串中。这是我当前用于zXMLHttpRequest的方法。
XMLHttpRequest
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?
demoRequest()
编辑
尝试从下面的答案实施解决方案,我已经像这样修改了表格。
<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()。
document.getElementById()
警告: 必须使用encodeURIComponent()所有名称,尤其是值,&以使字符串中包含的内容不会破坏格式。
encodeURIComponent()
&
例:
var input = document.getElementById("my-input-id"); var inputData = encodeURIComponent(input.value); request.send("action=dosomething&" + input.name + "=" + inputData);
另一个简单得多的选择是使用FormData对象。这样的对象可以保存名称和值对。
FormData
幸运的是,我们可以FormData从现有表单中构造一个对象,并将其直接发送到XMLHttpRequest的方法 send() :
var formData = new FormData( document.getElementById("my-form-id") ); xhr.send(formData);