JQuery 表单提交添加请求标头答案

【问题标题】：JQuery form submit adding request headersJQuery 表单提交添加请求标头
【发布时间】：2016-12-16 16:25:59
【问题描述】：

我想问是否可以在调用$(myForm).submit();之前指定标题我知道你可以在AJAX post请求中指定但是在这个简单的表单提交之前可以吗？

【问题讨论】：

不，不可能使用 javascript 向常规表单提交添加标题。

【解决方案1】：

是的，你可以。需要一些原生 JavaScript 苦差事，我就是这样做的：

<!DOCTYPE html>
<html>

  <body>
    <h1>Custom Header Injection 1</h1>
    <div id="header_demo">
      <form id="custom_form">
        <input type="hidden" name="name_1" value="${form.name_1}" />
        <button type="button" onclick="submitFormAndHeader()">Submit Form</button>
      </form>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
    <script>
      function submitFormAndHeader() {
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
              this.responseText;
          }
        };
        xhttp.open("POST", "/v1/target-endpoint.do", true);
        xhttp.setRequestHeader("custom_header", "test value of custom header");
        xhttp.send($("#custom_form").serialize());
      }

    </script>
  </body>

</html>

添加了一个函数submitFormAndHeader，它创建了一个XMLHttpRequest 对象，该对象添加了所需的标头并通过HTTP POST 提交HTML DOM 表单。

或者，您可以使用Jquery submit handler 并调用上面创建的submitFormAndHeader() 函数：

$( "#custom_form" ).on( "submit", function( event ) {
  event.preventDefault();
  submitFormAndHeader();
});

【讨论】：

OP 在没有 Ajax 的情况下询问
嗨@epascarello，是的 XMLHttpRequest.send() 确实是一个ajax调用。然而，最初的问题是：is it possible to specify headers before calling $(myForm).submit(); 在这里，我们在表单提交事件期间添加一个标题并覆盖它的默认行为。
是的，它与 Ajax 无关......答案是......不可能
@epascarello 我已经解释了可以在调用 $(myForm).submit(); 时添加标题 .. 即通过传递覆盖 $( "myForm" ).on( "submit", function( event ) {... .. 不使用 @Donatas 所要求的 jquery 的 ajax 函数：@987654334 @
Ajax Headers 不会对正常的表单提交做任何事情。只有当他们进行 Ajax 调用时才会有所作为。