javascript - 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 的构造函数的调用并不知道它是由点击提交按钮触发的(更不用说它是哪个提交按钮)，而且因为您只需要 < em>used 包含提交按钮的值，提交按钮不包含在发布的数据中。您可以使用 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>