Question

请考虑以下代码段：

＆＃13;

$('#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));
});

＆＃13;

<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>

＆＃13;

（打开您的开发人员工具并观察HTTP请求。）

单击该按钮时，您在文本框中输入的任何文本都包含在POST请求中。但是，按钮本身的lol=cats对不是。

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

Answer 1

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

＆＃13;

$('#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);
});

＆＃13;

 <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>

＆＃13;

FormData不包含按钮的值

1 个答案: