jquery表单插件，无错误处理

问题描述

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

It seems that there are no error handling facility in the Jquery.Form plugin, which is very frustrating. Even though the documentation says we can use the $.ajax options, I still cannot make use of the 'error' option when the server returns an error, especially the 500 and 400 series. Is it that this plugin cannot handle any error at all from the server or is it a bug, etc?Can someone please tell me how I can handle errors (400, 500, etc) with this plugin? I need your help... All I want is a simple error handling... Thank you.

$("#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 表单插件确实处理错误，documentation 正确地说明它可以使用 $.ajax 选项.但是，插件将运行两种模式 - 正常和文件上传.您遇到的问题是因为您正在执行文件上传.(你没有这么说，但你有#uploadingImg"和#polygonUploadForm"，递归推理，你有这个问题.)

The jQuery Form Plugin does handle errors and the documentation is correct in stating it can use the $.ajax options. However there are two modes the plugin will run in - normal and file upload. The problem you are having is because you are performing a file upload. (You don't say this but you have "#uploadingImg" and "#polygonUploadForm" and, recursive reasoning, you are having this problem.)

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

This is commonly stated, but you can't upload a file with AJAX. This workaround is to use an iframe. Form submit POSTs a normal HTTP request and loads the server response in the iframe. The plugin grabs the response and voila. Because this happens as a normal HTTP request, the rules and behaviors of $.ajax don't apply (because it isn't being used). The only thing Form plugin can do is treat whatever it gets as a success. In code terms, file uploading will never trigger the 'error' attribute assigned to ajaxForm() or ajaxSubmit(). If you really want to prove this isn't an AJAX request, attach an ajaxComplete() handler to the form (i.e. completely independent of the Form plugin's methods). It won't get triggered either. Or look at Firebug's Net->XHR panel.

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

So that's that - the upload is not an AJAX request. The best you can do is work within the 'success' or 'complete' callbacks of ajaxForm()/ajaxSubmit(). You are limited without access to the actual HTTP response code, but you can examine the response. If the response is empty or not what you expect, you can actually trigger the 'error' callback by calling xhr.abort(). Instead of doing "if(good response) {yay!} else {oh no!}", calling abort() and triggering 'error' makes the code a little cleaner and more understandable IMHO. Here's a code example:

$("#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");
    }
});

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

A bad will response will print this in the console log:

[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 标头.

I don't know why the 'complete' callback is run twice - anyone?One final thing, read this thread if you are asking why jQuery or the Form plugin can't just read the HTTP headers of the iframe.

这篇关于jquery表单插件，无错误处理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！