Jquery plugins jquery表单插件，无错误处理

在Jquery.Form插件中似乎没有错误处理功能，这非常令人沮丧。尽管文档中说我们可以使用$.ajax选项，但当服务器返回错误时，我仍然不能使用“error”选项，尤其是500和400系列。是这个插件根本无法处理来自服务器的任何错误，还是一个bug，等等？ 有人能告诉我如何用这个插件处理错误（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.form插件本身不处理服务器错误，因为由于“file input”标记处理文件上传的方式，它无法访问响应头。因此，我认为W3CW3C需要检查这个麻烦的标记，它不仅不允许您使用CSS对其进行样式化，而且也不能使服务器响应处理变得简单

但一定有办法解决这个问题

如果我说错了什么，请告诉我，并告诉我您对“选项”中的“文件输入”标签的想法…

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

在发生错误的情况下没有触发器调用。当你得到500或404时，插件就会挂起。 成功只取决于“成功”，所以这就是我们目前所拥有的一切。

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

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

因此，上传不是AJAX请求。您最多只能在ajaxForm（）/ajaxSubmit（）的“成功”或“完成”回调中工作。您无法访问实际的HTTP响应代码，但可以检查响应。如果响应为空或不是您所期望的，您实际上可以通过调用

xhr.abort（）

触发“error”回调。调用abort（）并触发'error'，而不是执行“if（good response）{yay！}else{oh no！}”，这会使代码更清晰，更容易理解。下面是一个代码示例：

$("#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或表单插件不能只读取iframe的HTTP头，请阅读。

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

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;
 }

---

Jquery表单插件处理服务器响应状态成功（代码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

            }


    }

---

+1.请注意，只有在使用iFrame变通方法时，这才是一个问题-也就是说，在不正确支持HTML5功能的浏览器中。我真的很喜欢人们花时间分享他们的知识。非常感谢@JCotton，我真的很感谢你清晰而翔实的回答：）谢谢你的好解决方案