使用 jQuery 表单插件通过 Ajax 上传文件时不调用错误处理程序答案

【问题标题】：Error handler isn't called when file is uploaded via Ajax using jQuery form plug-in使用 jQuery 表单插件通过 Ajax 上传文件时不调用错误处理程序
【发布时间】：2011-02-19 01:45:00
【问题描述】：

这是我的测试用例。如果表单已发布，则会发送 500 错误响应。如果没有，则发送表单。

如果文件输入标记被注释掉，则调用错误处理程序。如果存在文件输入标记，则不调用错误处理程序。我认为这可能与 jQuery 需要使用 iframe 来处理上传和 iframe don't seem to respond to the error handler 的事实有关。

编辑：如果我将iframe: true 添加到传递给ajaxSubmit 的选项中以强制使用iframe，则非文件上传情况也会停止工作，因此它肯定与iframe 有关。

Edit2：我正在使用jQuery Form Plugin。

<?php
    if($_SERVER['REQUEST_METHOD'] == 'POST') {
        header('HTTP/1.1 500 Internal Server Error');
        die;
    } else {?>
    <html><head>
        <script type='text/javascript'
          src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=2.9.2'></script>
        <script type='text/javascript'
          src='http://github.com/malsup/form/raw/master/jquery.form.js?v2.43'></script>
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('a').click(function() {jQuery('form').ajaxSubmit({error: function(){alert('error handler called');}})});
            });
        </script>
    </head><body>
        <form method="POST">
            <input type="text" name="mytext" />
            <input type="file" name="myfile" /><!-- comment this element out -->
            <input type="hidden" name="blah" value="blah" />
            <a>submit</a>
        </form>
    </body></html>

<?php }

有没有办法让错误处理程序在这两种情况下都被调用？

【问题讨论】：

究竟什么是“ajaxSubmit”？是插件还是什么？你自己的代码？它不在 jQuery 1.4.2 中。
抱歉，我应该包含问题标题中提到的插件的链接：jquery.malsup.com/form

标签： javascript jquery ajax upload

【解决方案1】：

据我查看.ajaxSubmit 代码可知，在您提交给<iframe> 的情况下，不会尝试检测或处理错误。我怀疑这是因为它无法了解在针对<iframe> 的 HTTP 响应中从服务器返回的错误代码。它确实调用了“成功”和“完整”插件，并尝试使用它在<iframe> 的 DOM 中找到的任何东西来拼凑一个虚假的 xhr 对象。

【讨论】：

感谢您朝着正确的方向前进。我分叉了插件，并在正在使用的代码路径中添加了一些错误处理。 github.com/scompt/form

【解决方案2】：

在我看来，您使用了不正确的表单提交插件ajaxSubmit()。如果ajaxSubmit的代码对应http://be.twixt.us/jquery/formSubmission.php的代码，则ajaxSubmit()会忽略{error:..,}等参数。

ajaxSubmit() 使用 $.post 发出 ajax 请求，因此您可以通过 jQuery.ajaxSetup() 定义您的 error 回调（参见 http://api.jquery.com/jQuery.ajaxSetup/ 和 http://api.jquery.com/jQuery.ajax/）

更新：我如何从您使用的插件源中看到（请参阅http://github.com/malsup/form/raw/master/jquery.form.js?v2.43）$.ajax(options);将仅用于以下 if 语句的 else 部分：

if (files.length && options.iframe !== false) || options.iframe || found || multipart) {
    if (options.closeKeepAlive)
        $.get(options.closeKeepAlive, fileUpload);
    else
        fileUpload();
} else
     $.ajax(options);

所以在所有其他情况下，您不能使用error 作为ajaxSubmit() 的参数。所以你可以将{closeKeepAlive: true}设置为ajaxSubmit() and don't forget to set beforeerrorcallback byjQuery.ajaxSetup()`的参数，就像我之前描述的那样。

【讨论】：

表单提交插件 (jquery.malsup.com/form/#options-object) 的文档明确表示允许使用标准的 $.ajax 选项。此外，当表单不包含文件上传时，它也有效。

【解决方案3】：

LTTP，但要使其在不使用分叉 jquery.form 插件的情况下工作，请将 dataType 选项设置为 'json'：

form.ajaxSubmit({ datatype: 'json', ...

然后让服务器在成功时返回一个简单的响应（它被解释为有效的 JSON），而不是裸露的 200 OK 响应。可以这么简单：

header('HTTP/1.1 200 OK');
回声（0）；

这会说服插件处理 5XX 错误响应。

【讨论】：