JavaScript：ajax提交错误答案

【问题标题】：JavaScript: ajaxSubmit errorJavaScript：ajax提交错误
【发布时间】：2011-04-11 09:17:57
【问题描述】：

我有一个按钮触发的以下JS函数：

function uploadPicture( ) {
    $("form#pictureUpload").ajaxSubmit({
        data: $("form#pictureform").serialize(),
        type: 'post',
        url: '?action=loadpicture',
        success: function(response) {
            $('#div-pictures').html(response);
        }
    });

}

这几个月都运行良好。但它今天在 Firefox、Safari、Chrome 和 Opera 中停止工作 - 尽管它仍然在 Internet Explorer 中正常工作。

Safari 给我以下神秘错误：

    Failed to load resource: cancelled       ?action=loadpicture

Chrome 输出几乎相同（没有: cancelled）。 Opera 和 Firefox 根本没有显示错误。唯一的附加信息是，上述错误发生在文件上传完成后，尽管服务器生成 HTML 输出作为反馈，但浏览器会忽略该反馈。

如果您知道如何解决此问题，请告诉我。我已经在圈子里跑了几个小时，甚至没有接近解决方案——我在代码和日志文件中都看不到任何错误。非常感谢！

【问题讨论】：

我不知道答案，但有一些想法需要调查： - 我认为在执行 POST 请求时指定 ?parm=value 是不正确的。通常，当您执行 GET 请求时，您提供的所有参数都以这种方式附加到 URL；当您 POST 时，这些值会像表单数据一样提交。尝试使用隐藏输入。我可能会误解这一点，即使它不是正常使用，也可能是允许的。 - 看起来您正在发回定义此代码的同一页面，不确定这是否是正确的行为？ -您使用的 jQuery 版本是否与以前不同？
没有相同的 jQuery 版本。我知道的唯一区别是 Apache 和 mod-php 的小更新。
'?action=loadpicture' 像以前一样工作吗？你试过同步调用这个url吗？
?action=loadpicture 如果我直接通过浏览器调用它，效果会非常好。你是这个意思吗？

标签： javascript jquery browser

【解决方案1】：

我花了一段时间，但我终于弄明白了。我们的一位管理员已添加到 Apache 配置中：

Header append X-FRAME-OPTIONS "DENY"

由于http://jquery.malsup.com/form/#file-upload 中描述的 iframe 使用，导致某些浏览器出现问题。将其更改为以下内容后，一切都恢复正常（没有代码更改！）：

Header append X-FRAME-OPTIONS "SAMEORIGIN"

无论如何，Safari 和 Chrome 上的错误消息都是神秘的。在其他浏览器上没有任何错误消息的奇怪行为更糟糕。

【讨论】：

确保在可能的情况下接受这一点，以后应该会让其他人头疼:)

【解决方案2】：

嗯，您不应该在 URL 中使用查询字符串，因为当您调用序列化时，它会将数据转换为查询字符串，请尝试以下操作：

$("form#pictureUpload").ajaxSubmit({
        data: 'action=loadpicture&'+$("form#pictureform").formSerialize(),
        type: 'post',
        success: function(response) {
            $('#div-pictures').html(response);
        }
    });

【讨论】：