FormData不包含按钮的值

Question

考虑以下代码段：

$('#myBtn').click(function(e) {
    e.preventDefault();
    
    var formElement = $(this).closest('form')[0];
    var request = new XMLHttpRequest();
    request.open("POST", "https://posttestserver.com/post.php");
    request.send(new FormData(formElement));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="POST" action="https://posttestserver.com/post.php">
  <input type="text" name="wtf" />
  <button type="submit" name="lol" value="cats" id="myBtn">
    Huh
  </button>
</form>

（将开发人员工具打开，并注意HTTP请求。）

当您单击按钮时，您在文本框中输入的所有文本都会包含在POST请求中。但是，不是lol=cats来自按钮本身的配对。

如何使FormData包含按钮提供的数据？

Answer 1

正如您已经说过的，FormData 无法知道按钮\xe2\x80\x99 的名称。但是当您捕获表单提交时，您可以通过事件上的属性获取名称submitter：

\n

const form = document.querySelector("form")\n\nform.addEventListener("submit", ev => {\n    ev.preventDefault()\n\n    const data = {}\n\n    for (const field of new FormData(form)) {\n        data[field[0]] = field[1]\n    }\n\n    // NB: we are setting "none" as a fallback in case the form\n    // has been submitted without clicking a button, e.g. by \n    // hitting enter in an input field.\n\n    data.action = ev.submitter ? ev.submitter.name : "none"\n\n    // \xe2\x80\xa6 and so on\n})\n

\n

Answer 2

因为对FormData的构造函数的调用不知道它是由单击提交按钮触发的（更不用说它是哪个提交按钮），并且因为您只希望包含使用的提交按钮的值，所以提交按钮不是包含在发布的数据中。您可以使用FormData.append包含所需的对。

$('#myBtn').click(function(e) {
    e.preventDefault();
    var formElement = $(this).closest('form')[0];
    var formData = new FormData(formElement);
    formData.append("lol","cats");
    var request = new XMLHttpRequest();
    request.open("POST", "https://posttestserver.com/post.php");
    request.send(formData);
});

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
 <form method="POST" action="https://posttestserver.com/post.php">
      <input type="text" name="wtf" />
      <button type="submit" id="myBtn">
        Huh
      </button>
    </form>