当前设置
我有一个像这样的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");
}
例如，假设在单击表单的提交按钮时调用了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);
ComFreek's answer是正确的，但缺少一个完整的例子。
因此，我写了一个非常简化的工作片段：
<!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.action, true);
xhr.send (new FormData (oFormElement));
return false;
}
</script>
</head>
<body>
<form method="POST"
action="post-handler.php"
onsubmit="return submitForm(this);" >
<input type="text" name="name" value="previousValue"/>
<input type="submit" value="Update"/>
</form>
</body>
</html>
这个片段是基本的，不能使用GET。我受到了优秀的Mozilla Documentation的启发。深入阅读此MDN文档以了解更多信息。另见answer using formAction。
顺便说一下，我使用以下代码在ajax请求中提交表单。
$('form[id=demo-form]').submit(function (event) {
if (request) {
request.abort();
}
// setup some local variables
var $form = $(this);
// let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// serialize the data in the form
var serializedData = $form.serialize();
// fire off the request to specific url
var request = $.ajax({
url : "URL TO POST FORM",
type: "post",
data: serializedData
});
// callback handler that will be called on success
request.done(function (response, textStatus, jqXHR){
});
// callback handler that will be called on failure
request.fail(function (jqXHR, textStatus, errorThrown){
});
// callback handler that will be called regardless
// if the request failed or succeeded
request.always(function () {
// reenable the inputs
});
// prevent default posting of form
event.preventDefault();
});
使用纯Javascript，您只需要以下内容：
var val = document.getElementById("inputFieldID").value;
您想要组成一个具有键值对的数据对象，有点像
name=John&lastName=Smith&age=3
然后用request.send发送它（“name = John＆lastName = Smith＆age = 3”）;
我想，我也遇到过这个问题。
我有一个带按钮的输入元素。按钮的onclick方法使用XMLHTTPRequest向服务器发送请求，所有请求都在JavaScript中编码。
当我将输入和按钮包装在表单中时，使用了表单的action属性。按钮不是type=submit，它形成了我应该阅读的HTML标准（https://html.spec.whatwg.org/#attributes-for-form-submission）。
但我通过覆盖form.onsubmit方法解决了这个问题：
form.onsubmit = function(E){return false;}
我使用的是FireFox开发人员版和铬38.0.2125.111 Ubuntu 14.04（290379）（64位）。
function postt(){
var http = new XMLHttpRequest();
var y = document.getElementById("user").value;
var z = document.getElementById("pass").value;
var postdata= "username=y&password=z"; //Probably need the escape method for values here, like you did
http.open("POST", "chat.php", true);
//Send the proper header information along with the request
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", postdata.length);
http.onreadystatechange = function() {//Call a function when the state changes.
if(http.readyState == 4 && http.status == 200) {
alert(http.responseText);
}
}
http.send(postdata);
}
如何从表单中发布y和z的值