javascript - 为什么FormData对象为空

当我在代码下运行时，我总是得到一个空的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();
    }
  };
}();

最佳答案

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

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

'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已经存在。

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

关于javascript - 为什么FormData对象为空，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46179316/