Stu*_*ing 19 javascript forms ajax xmlhttprequest http-post
当前设置
我有一个像这样的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中检索数据然后放入一个post请求字符串.这是我目前用于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;
});
Com*_*eek 27
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);
oli*_*bre 14
该ComFreek的答案是正确的,但一个完整的例子丢失.
因此,我写了一个非常简化的工作片段:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge, chrome=1"/>
<script>
"use strict";
function submitForm(oFormElement)
{
var xhr = new XMLHttpRequest();
xhr.onload = function(){ alert(xhr.responseText); }
xhr.open(oFormElement.method, oFormElement.getAttribute("action"));
xhr.send(new FormData(oFormElement));
return false;
}
</script>
</head>
<body>
<form method="POST"
action="post-handler.php"
onsubmit="return submitForm(this);" >
<input type="text" value="previousValue" name="name"/>
<input type="submit" value="Update"/>
</form>
</body>
</html>
此代码段是基本的,无法使用GET.我从优秀的Mozilla文档中获得灵感.深入阅读此MDN文档以了解更多信息.请参阅此答案formAction.
| 归档时间： |
|
| 查看次数： |
65465 次 |
| 最近记录： |