JQuery表单提交添加请求标头

问题描述 投票:3回答:1

我想问是否可以在调用$(myForm).submit();之前指定头,我知道您可以在AJAX发布请求中指定,但是在此简单表单提交之前可以吗?

jquery forms submit
1个回答
0
投票

是的,可以。需要一些本地的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对象,该对象添加所需的标题并通过HTML提交DOM HTTP POST表单。


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

$( "#custom_form" ).on( "submit", function( event ) {
  event.preventDefault();
  submitFormAndHeader();
});
© www.soinside.com 2019 - 2024. All rights reserved.