Question

当我在代码下面运行时，我总是得到一个空的FormData，是不是因为形式太复杂了？我该如何更改代码？

似乎我只使用表单，输入，标签等标签来构造表单，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已经存在。

查看表单如何从事件处理程序传递到函数。

为什么FormData对象为空

1 个答案: