JQuery 表单提交添加请求标头
Posted
技术标签:
【中文标题】JQuery 表单提交添加请求标头【英文标题】：JQuery form submit adding request headers 【发布时间】：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 调用时才会有所作为。以上是关于JQuery 表单提交添加请求标头的主要内容，如果未能解决你的问题，请参考以下文章
使用 django ajax jquery 提交一个文件不起作用的表单
多次动态添加(append)一个表单到一个模态框以后，如何解决多次提交？