为什么FormData对象为空

Question

当我在代码下运行时，我总是得到一个空的FormData，是因为表单太复杂了吗？ 我应该如何更改代码？

看来，如果我仅使用form，input，label之类的标签来构造表单，则FormData对象不会为空。 也许我可以手动构造一条线并通过XMLHttpRequest发送它，但是有更好的方法吗？

任何帮助将不胜感激，谢谢您的时间。

的HTML：

<form enctype="multipart/form-data" id="inquiry" name="inquiry" method="post" role="form"><!--action="processData.php"-->
    <div class="row">
        <div class="form-group">
            <div class="col-md-6">
                <label for="name">Your name</label>
                <input type="text" class="form-control" id="name" maxlength="100">
            </div>
            <div class="col-md-6">
                <label for="email">Your email address</label>
                <input type="text" class="form-control" id="email" maxlength="100">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                <label for="subject">Subject</label>
                <input type="text" class="form-control" id="subject" maxlength="100">
            </div>
        </div>
    </div>
    <div class="row">
        <div class="form-group">
            <div class="col-md-12">
                <label for="message">Your message</label>
                <textarea class="form-control" id="message" maxlength="5000"></textarea>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <button id="post-message" type="submit">
                <span>Send Message</span>
            </button>
        </div>
     </div>
</form>

js：

'use strict';
var Contact = function() {
  var sendData = function() {
    var xmlhttp = new XMLHttpRequest() ;
    var url = "/php/processData.php";
    var inquiryForm = document.forms.namedItem("inquiry");
    var FD = new FormData(inquiryForm);
    xmlhttp.open("POST", url , true);
    xmlhttp.onreadystatechange = function() {
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var returnData = xmlhttp.responseText ;
      }
    };
    xmlhttp.send(FD);

    for (var [key, value] of FD.entries()) {
      console.log(key, value);
    }
  };

  var windowLoadHandler = function() {
    window.addEventListener("load",function(){
      var inquiryForm = document.getElementById("inquiry");
      inquiryForm.addEventListener("submit",function(event){
        event.preventDefault();
        sendData();
      });
    });
  };

  return {
    init : function(){
      windowLoadHandler();
    }
  };
}();

Answer 1

您必须将名称添加到所有表单元素中，否则它们将不会与表单一起发送。

这是经过一些更改才能使其工作的代码

 'use strict'; var Contact = (function() { var sendData = function(form) { var xmlhttp = new XMLHttpRequest(); var url = "/php/processData.php"; var FD = new FormData(form); xmlhttp.open("POST", url, true); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { var returnData = xmlhttp.responseText; // note, async, can't be used outside this function } } xmlhttp.send(FD); console.log() for (var pair of FD.entries()) { console.log(pair[0] + ', ' + pair[1]); } } var windowLoadHandler = function() { var inquiryForm = document.getElementById("inquiry"); inquiryForm.addEventListener("submit", function(event) { event.preventDefault(); sendData(this); }); } return { init: function() { windowLoadHandler(); } }; })(); $(document).ready(function() { Contact.init(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form enctype="multipart/form-data" id="inquiry" name="inquiry" method="post" role="form"> <!--action="processData.php"--> <div class="row"> <div class="form-group"> <div class="col-md-6"> <label for="fullname">Your name</label> <input type="text" class="form-control" id="fullname" name="fullname" maxlength="100"> </div> <div class="col-md-6"> <label for="email">Your email address</label> <input type="text" class="form-control" id="email" maxlength="100" name="email"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label for="subject">Subject</label> <input type="text" class="form-control" id="subject" maxlength="100" name="subject"> </div> </div> </div> <div class="row"> <div class="form-group"> <div class="col-md-12"> <label for="message">Your message</label> <textarea class="form-control" id="message" maxlength="5000" name="message"></textarea> </div> </div> </div> <div class="row"> <div class="col-md-12"> <button id="post-message" type="submit"> <span>Send Message</span> </button> </div> </div> </form> 

通过调用Contact.init()您可能想要IIFE。
需要注意的是name始终是一个变量可怜的名字，甚至更坏的名称/ ID一个元素，作为window.name已经存在。

了解如何将表单仅从事件处理程序传递到函数。