如何让FormData包含提交按钮的键值对数据？

这个问题其实是FormData的一个小特性导致的——它默认只会把触发表单提交的那个按钮的数据包含进去，但你现在是在按钮的click事件里阻止了默认提交，手动创建FormData，这时候浏览器不知道是这个按钮触发的操作，自然不会把它的键值对加进去。

下面给你两种简单的解决方法：

方法一：手动向FormData添加按钮的键值对 #

直接在创建FormData之后，把按钮的name和value手动append进去就行，代码修改如下：

$('#myBtn').click(function(e) {
  e.preventDefault();
  var formElement = $(this).closest('form')[0];
  var formData = new FormData(formElement);
  // 手动添加当前按钮的键值对
  formData.append($(this).attr('name'), $(this).val());
  var request = new XMLHttpRequest();
  request.open("POST", "https://posttestserver.com/post.php");
  request.send(formData);
});

方法二：绑定表单的submit事件而非按钮的click事件 #

如果把事件绑定到表单本身的submit事件上，浏览器会自动识别出是哪个按钮触发了提交，这时候FormData就会自动包含该按钮的键值对，代码修改如下：

$('form').submit(function(e) {
  e.preventDefault();
  var formData = new FormData(this); // this指向当前表单元素
  var request = new XMLHttpRequest();
  request.open("POST", "https://posttestserver.com/post.php");
  request.send(formData);
});

这种方法更贴合浏览器的默认行为，也不用手动处理按钮数据，推荐优先使用。

内容的提问来源于stack exchange，提问作者Lightness Races in Orbit