XMLHttpRequest 发布 HTML 表单答案

【问题标题】：XMLHttpRequest to Post HTML FormXMLHttpRequest 发布 HTML 表单
【发布时间】：2013-09-06 17:04:31
【问题描述】：

当前设置

我有一个这样的 HTML 表单。

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

我可能在一个页面上有很多这样的表单。

我的问题

如何异步提交此表单而不被重定向或刷新页面？我知道如何使用XMLHttpRequest。我遇到的问题是从 javascript 中的 HTML 中检索数据，然后放入发布请求字符串中。这是我目前用于 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;
                            });

【问题讨论】：

您标记了 jQuery，但没有 jQuery 代码...您要使用 jQuery 还是纯 javascript？
抱歉点击错误。只是 javascript
我发布了一个你可以通过 jquery 使用的答案
Sending POST data with a XMLHttpRequest的可能重复
为了防止默认的表单动作，在表单的提交事件上设置一个事件监听器，而不是按钮的点击事件。（并且仍然拨打evt.preventDefault();）

标签： javascript ajax xmlhttprequest forms http-post

【解决方案1】：

顺便说一句，我使用以下代码在 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();
});

【讨论】：

OP确实不想要使用jQuery。
@ComFreek 他没有提到问题。现在他在评论中提到。我在此评论之前发布了答案。
感谢发布 Awais，我找到了这个帖子，我确实想使用 jQuery
如果我们想要 ajax 我们会使用 jq 所以不用了，谢谢

【解决方案2】：

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);

【讨论】：

我是否覆盖按钮的onClick 函数并将其指向我的XMLHttpRequest 方法？
@DiscoS2 是的。您是否为单击事件注册了任何其他事件处理程序？
不适用于本表号
感谢您进一步扩展您的答案。我在提交表单时遇到问题。我已从<form> 标记中删除操作和方法，因为它仍在通过HTML 发布。如何调用我的javascript 方法？
@DiscoS2 你是如何分配事件监听器的？您能否向我们展示代码（在您的回答中 - 请不要在评论中）？

【解决方案3】：

使用纯 Javascript，您只需要以下内容：

var val = document.getElementById("inputFieldID").value;

你想组成一个具有键值对的数据对象，有点像

name=John&lastName=Smith&age=3

然后用 request.send("name=John&lastName=Smith&age=3");

发送

【讨论】：

【解决方案4】：

ComFreek's answer 是正确的，但缺少完整的示例。

因此我写了一个极其简化的工作 sn-p：

<!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>

这个 sn-p 是基本的，不能使用GET。我受到了出色的Mozilla Documentation 的启发。深入阅读此 MDN 文档以做更多事情。另见answer using formAction。

【讨论】：

当我使用这种方法时，我的表单提交了多次（2）次。有什么建议吗？
今天我刚刚找到了一个小修复。我已将onsubmit="submitForm(this);" 更改为onsubmit="return submitForm(this);"。您的其余代码保持不变。这解决了我的问题。谢谢。
非常感谢@MayurPatel 的反馈。我刚刚编辑了 sn-p 以反映您的贡献。玩得开心;-)
您应该使用oFormElement.getAttribute("action")，以防您添加了一个名为“action”的输入字段，这将覆盖您的oFormElement.action。方法 ofc 也是如此
感谢@h3n 的建议 ? 我刚刚应用了你的技巧。我应该为oFormElement.getAttribute("method") 做同样的事情吗？我有点害怕我原来的小sn-p变得越来越复杂......你怎么看？玩得开心?

【解决方案5】：

我想我也遇到过这个问题。

我有一个带按钮的输入元素。按钮的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 开发者版和 chromium 38.0.2125.111 Ubuntu 14.04 (290379)（64 位）。

【讨论】：

【解决方案6】：

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 的值

【讨论】：

如果您有一个单独的问题，您应该创建一个问题，而不是针对已经存在的问题发布答案。谢谢。