为什么 ajaxSubmit 不发送带有 X-Requested-With=XMLHttpRequest 请求标头的正确 ajax 请求答案

【问题标题】：Why ajaxSubmit does not send a correct ajax request with X-Requested-With=XMLHttpRequest request header为什么 ajaxSubmit 不发送带有 X-Requested-With=XMLHttpRequest 请求标头的正确 ajax 请求
【发布时间】：2011-01-07 20:36:33
【问题描述】：

我搜索了很多，但我没有找到任何解决方案

我使用jQueryUI Dialog 和ajaxSubmit 通过模态对话框和Ajax 发送数据（文件和其他）。

我的问题很简单：数据正确发送到服务器但不是通过ajax，即没有请求头属性X-Requested-With=XMLHttpRequest

那么我做错了什么还是有任何已知问题？

这是我的代码的一些 sn-p。

$('#photo-dlg').dialog({
  modal: true,
  open: function() { $(this).load("/mywebsite/mydialog");} 
  //importing <form id="formid" method="post" name="updatePhoto" enctype="multipart/form-data"> ...
  buttons: { 
    'cancel' : function() {$(this).dialog('close');}, 
    'submit' : function() { 
               $('#formid').ajaxSubmit({
                   dataType: "json", 
                   success: function (data) { $('#photo-dlg').dialog('close'); })  
               });}
  });

顺便说一句，我尝试过类似的选项：

headers: {"X-Requested-With":"XMLHttpRequest"} //OR
data: {"X-Requested-With":"XMLHttpRequest"} //OR
beforeSend: function(xhrObj) {xhrObj.setRequestHeader("X-Requested-With", "XMLHttpRequest")}

没有成功

更新：
您可以将以下代码复制/粘贴到 html 页面中，然后通过 FireBug 自己尝试（=> No X-Requested-With header）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js"></script>
    <script type="text/javascript" src="http://d23fbyuk1dcxop.cloudfront.net/js/jquery/jquery.multiselect-1.8.min.gz.js"></script>
    <script type="text/javascript" src="http://d23fbyuk1dcxop.cloudfront.net/js/jquery/jquery.form.min.gz.js"></script>
</head>
<body>
<div id="photo-dlg2">
    <form id="updatePhoto2" enctype="multipart/form-data" elementid="updatePhoto2" name="updatePhoto2" method="POST"
          action="http://mywebsite.com/article/updatePhoto">
        <input type="file" size="50" class="easyinput" id="photoFile" name="photoFile">
    </form>
</div>
<script type="text/javascript">
    $('#photo-dlg2').dialog({
        modal: true,
        buttons: { 'submit' : function() {
            $('#updatePhoto2').ajaxSubmit({
                dataType: "json",
                success: function (data) {
                    alert(data['status']);
                }
            });
        }}
    });
</script>
</body>
</html>

【问题讨论】：

像firebug、LiveHTTPHeaders这样的工具告诉你什么？
我尝试了示例@jquery.malsup.com/form/#ajaxSubmit，我可以看到正在发送的标头（使用萤火虫检查它。）
也许你应该发布你用来寻找标题的代码；问题可能存在，而不是您的页面代码。
不，不发送标头。通过 Firefox 和服务器端验证。毫无疑问。
就我而言，问题在于使用 http（有效）x https（无效）

标签： javascript jquery ajax jquery-ui

【解决方案1】：

我已经被这个错误击中了。我知道你会感到多么孤独:-)

我已经找了好几个星期了。有时我有 XMLHttpRequest 标头，有时我没有。所以这可能不是一个明确的解决方案，但对我有用。

我像您一样测试了标头，并且还测试了 ajax 设置更改。直到……对我的代码进行完整的 javascript 语法清理之前，什么都没有。经过一些 IE6 测试后，似乎有些 ';' （或者是'，'？不-在我写的时候闭嘴-它是';'）在某些关键点上丢失了，并且任何现代浏览器都没有受到影响......或者至少看起来它们没有受到影响. IE6 完全被破坏了，所以我们发现了语法问题（顺便说一下——或者也许通过 Dichotomy 会更现实）。

我记不太清了（是在做作之间吗？在一长串括号的末尾...），但是在我受到此错误影响的每个地方，我都默默地忽略了一些语法错误。并且可以肯定 jQuery 变坏了（就像清除了 ajax 设置一样）。这是我一生中唯一一次很高兴遇到 IE6 错误 :-)

【讨论】：

但他在 Firefox 中发现了问题。
我会仔细检查我的代码。 TYhx 的建议。我会及时通知你
@Pointy 每个浏览器都有问题。但是 regilero 说的是，由于 IE6，他们已经能够识别出问题根源的语法错误
@fabien7474 尝试二分法，删除sn-ps的代码，直到你得到坏的。
啊好吧我明白你的意思了。

【解决方案2】：

好吧，我花了一段时间，但我终于找到了答案：没有解决方案！

其实好像jquery表单插件cannot upload files using the browser's XMLHttpRequest object，

实际上，我已经尝试在插件网站上给出示例，实际上，如果您在表单中添加 <input type="file" name="photoFile">，则标头 X-Requested-With=XMLHttpRequest 永远不会发送到服务器，并且您的服务器无法使用常规方法检测到如果您的请求是 Ajax 请求。

很高兴知道并感谢您的帮助。

【讨论】：

错过了您在谈论文件的事实，您应该尝试使用隐藏 iframe 上传 jquery 插件或其他插件。

【解决方案3】：

这可能对某人有所帮助。

我想我知道问题何时发生。当您使用 IE 7、8 或 9（显然...），并且您尝试使用 ajaxform 上传文件时（我想 ajaxsubmit 也会发生同样的事情），这就是问题发生的时候。

IE 不发送 X-Requested-With=XMLHttpRequest 标头。 Chrome 会发送此标头，Firefox 也会发送。

【讨论】：

【解决方案4】：

在 Javascript 中定义对象时需要注意逗号。您的代码缺少一个。

$('#photo-dlg').dialog({
  modal: true,
  open: function() { $(this).load("/mywebsite/mydialog");}, // you had a missing comma here.
  //importing <form id="formid" method="post" name="updatePhoto" enctype="multipart/form-data"> ...
  buttons: { 
    'cancel' : function() {$(this).dialog('close');}, 
    'submit' : function() { 
               $('#formid').ajaxSubmit({
                   dataType: "json", 
                   success: function (data) { $('#photo-dlg').dialog('close'); })  
               });}
  });

但这可能不是你的问题的原因。

【讨论】：

不幸的是，这不是问题所在。代码我自己贴出来了，大家可以自己试试

【解决方案5】：

当我不小心在页面上放置了 2 个具有相同 id 的表单时，IE 10 停止了我的 http 标头 (X-Requested-With=XMLHttpRequest)。

我知道这是旧的，但当我搜索该问题时，它出现在 google 的前 5 个结果中。

【讨论】：