jquery表单插件，没有错误处理答案

【问题标题】：jquery form plugin, no error handlingjquery表单插件，没有错误处理
【发布时间】：2010-10-22 09:06:23
【问题描述】：

Jquery.Form 插件中好像没有错误处理工具，很郁闷。即使文档说我们可以使用 $.ajax 选项，当服务器返回错误时，我仍然无法使用 'error' 选项，尤其是 500 和 400 系列。是这个插件根本无法处理来自服务器的任何错误，还是一个错误等？有人可以告诉我如何使用此插件处理错误（400、500 等）吗？我需要你的帮助...我想要的只是一个简单的错误处理...谢谢。

$("#uploadingImg").hide();

var options = {//Define ajax options
    type: "post",
    target: "#responsePanel",
    beforeSend: function(){
        $("#uploadingImg").show();
    },
    complete: function(xhr, textStatus){
        $("#uploadingImg").hide();
    },
    success: function(response, statusString, xhr, $form){
        // I know what to do here since this option works fine
    },
    error: function(response, status, err){
        // This option doesn't catch any of the error below, 
        // everything is always 'OK' a.k.a 200
        if(response.status == 400){
            console.log("Sorry, this is bad request!");
        }
        if(response.status == 601){
            sessionTimedOut();
        }
    }
}
$("#polygonUploadForm").submit(function(){
    $(this).ajaxSubmit(options); // Using the jquery.form plugin
    return false;
});

【问题讨论】：

标签： jquery-plugins jquery file-upload jquery-forms-plugin ajax-upload

【解决方案1】：

jQuery 表单插件确实处理错误，并且 documentation 正确地说明它可以使用 $.ajax 选项。但是，插件将运行两种模式 - 正常和文件上传。您遇到的问题是因为您正在执行文件上传。（你没有这么说，但你有“#uploadingImg”和“#polygonUploadForm”，递归推理，你有这个问题。）

这是常见的说法，但您不能使用 AJAX 上传文件。此解决方法是使用 iframe。表单提交 POST 一个普通的 HTTP 请求并在 iframe 中加载服务器响应。该插件获取响应并瞧。 因为这是作为普通 HTTP 请求发生的，所以 $.ajax 的规则和行为不适用（因为它没有被使用）。表单插件唯一能做的就是把它得到的任何东西都视为成功。在代码方面，文件上传永远不会触发分配给 ajaxForm() 或 ajaxSubmit() 的 'error' 属性。如果您真的想证明这不是 AJAX 请求，请将 ajaxComplete() 处理程序附加到表单（即完全独立于表单插件的方法）。也不会触发。或者查看 Firebug 的 Net->XHR 面板。

就是这样 - 上传不是 AJAX 请求。您可以做的最好的事情是在 ajaxForm()/ajaxSubmit() 的“成功”或“完成”回调中工作。您无法访问实际的 HTTP 响应代码，但您可以检查响应。如果响应为空或不是您所期望的，您实际上可以通过调用xhr.abort() 来触发“错误”回调。与其做“if（good response）{yay!} else {oh no!}”，不如调用 abort() 并触发 'error' 使代码更简洁，恕我直言。这是一个代码示例：

$("#uploadForm").ajaxForm({
    success: function(response, textStatus, xhr, form) {
        console.log("in ajaxForm success");

        if (!response.length || response != 'good') {
            console.log("bad or empty response");
            return xhr.abort();
        }
        console.log("All good. Do stuff");
    },
    error: function(xhr, textStatus, errorThrown) {
        console.log("in ajaxForm error");
    },
    complete: function(xhr, textStatus) {
        console.log("in ajaxForm complete");
    }
});

一个坏的将响应将在控制台日志中打印：

[jquery.form] state = uninitialized
"NetworkError: 404 NOT FOUND - http://server/fileupload/"
[jquery.form] state = loading
[jquery.form] isXml=false
in ajaxForm success
bad or empty response
[jquery.form] aborting upload... aborted
in ajaxForm error
in ajaxForm complete
in ajaxForm complete

我不知道为什么“完成”回调会运行两次 - 有人吗？最后一件事，如果你问为什么 jQuery 或 Form 插件不能只读取 iframe 的 HTTP 标头，请阅读 this thread。

【讨论】：

+1。请注意，仅当使用 iFrame 解决方法时才会出现问题 - 即，在不正确支持 HTML5 功能的浏览器中。（咳嗽即咳嗽）
+1 我真的很喜欢人们花时间分享他们的知识。非常感谢@JCotton，我非常感谢你清晰而翔实的回答:)

【解决方案2】：

刚刚发现 jquery.form 插件本身不处理服务器错误，因为由于“文件输入”标签处理文件上传的方式，它无法访问响应标头。所以我认为 W3C 需要审查那个麻烦的标签，它不仅不能让你用 CSS 来设置它的样式，而且也不能让服务器响应处理变得容易。

但一定有办法解决它......

如果我说错了，请告诉我，并让我知道您对这个“文件输入”标签的看法...

【讨论】：

【解决方案3】：

Jquery Form Plugin 处理服务器响应状态成功（代码200），我觉得信息就够了。

从中您可以创建响应状态服务器端

            return $this->returnJson(array(
                'response' => 'success',//error or whatever
                'data' => 'Succesfully saved in the database'
            ));

当然 returnJson 是一个发送 Json 数据的函数（你可以构建一个或在你的方法中做）

在成功句柄的前端（响应为 200 时触发）您只需要检查您的状态字段（在本例中为“响应”），示例如下：

  var options = {
        dataType : 'json',
        success: handleResponse
    };


    function handleResponse (responseText, statusText, xhr, $form){

          if(responseText.response == 'success') {
                  //do something

                }else if(responseText.response == 'error'){
                    //do something

            }


    }

【讨论】：

感谢您的出色解决方案

【解决方案4】：

在选项中

var options = { 
    target:        '#output2',    
    beforeSubmit:  showRequest,   
    success:       showResponse,  
timeout:    1000
};

发生错误时不会触发调用。当您获得 500 或 404 时，该插件就会挂起。成功只是对“成功”采取行动，所以这就是我们现在所拥有的一切。

【讨论】：

【解决方案5】：

对于任何仍然需要它的人来说，这是一种让它工作的方法

function submitForm()
{
    var isSuccess   = false,
        options = {
            url         : "posturl.php",
            type        : 'POST',
            dataType    : 'json',
            success:function(msg) {
                //set the variable to true
                isSuccess = true;

                //do whatever
            },
            complete: function () {
                if (isSuccess === false) {
                    //throw the error message
                }
            }
        };

    //Ajax submit the form
    $('#your_form').ajaxSubmit(options);

    // always return false to prevent standard browser submit and page navigation
    return false;
 }

【讨论】：