javascript - 处理 AJAX 错误、未登录等 - 关于此方法的想法?

标签 javascript ajax jquery

我正在尝试使用 jQuery 设置一个通用的 AJAX 成功/错误处理程序,我可以在多个项目中使用它。我这样做的原因是因为在 AJAX 请求期间可能会发生许多可能的“错误”。以下是我目前处理过的问题以及状态编号:

  • 0:未知错误
  • 1:成功
  • 2:未登录
  • 3:超时
  • 4:不允许(基于权限)
  • 404错误

对于前 5 个错误,我不得不手动处理它们。为此,我能找到的唯一方法是在 AJAX 调用的成功函数内运行 cl4.process_ajax 方法,使用 JSON 数据中的状态键/属性来确定状态是。对于 404 或其他一些 AJAX 错误(即无法解析的 JSON),我在 jQuery 中使用了 ajaxError() 全局事件处理程序。

基本思路是当出现错误时在#ajax_errors里面的屏幕顶部显示错误,向下滑动使其看起来“漂亮”。可以单击每个错误以将其隐藏。

这是我如何使用它的示例。 cl4.process_ajax 也可以放在 if 子句中,只允许代码在成功时执行。

$.getJSON('/path/to/page?c_ajax=1', function(return_data) {
    cl4.process_ajax(return_data);
    if (return_data !== null && typeof return_data == 'object' && typeof return_data.html != 'undefined') {
        $('#div').html(return_data.html);
    } else {
        $('#div').html('');
    }
});

查询参数 c_ajax 告诉登录和权限检查返回一个 JSON 数组,而不是像通常那样将用户重定向到登录或无访问页面。

只需包含 error_msg 键/属性,即可在服务器上轻松自定义显示的消息。这将使处理翻译之类的事情变得容易,也使代码更加灵活。我已经包含了在调试时显示调试消息的功能,因此在开发过程中很容易确定错误是什么(与一般用户消息相比)。

JSON 编码的数组应该类似于:

array(
   status => the status using the constants in AJAX
   error_msg => message to be displayed the user at the top of the page
   debug_msg => message to be displayed in debug mode
   html => the html to display
   ... any other data for that request
)

错误处理代码如下:

// setup the cl4 object and the debug flag
// these are typically else where and cl4 has other stuff in it
var cl4 = {};
var cl4_in_debug = TRUE; // probably default to false, but for this makes it easier to test

cl4.default_error_msg = 'There was a error loading some of the content on this page.<br>Try reloading the page or contacting an administrator.';

/**
* attach an AJAX error hander to the ajax_error element
*/
$('#ajax_errors').ajaxError(function() {
    cl4.add_ajax_error(cl4.default_error_msg);
});

/**
* Call within a ajax success function to deal with the response of an ajax call
*/
cl4.process_ajax = function(return_data) {
    if (typeof return_data != 'object' || return_data === null) {
        cl4.add_default_ajax_error(return_data);
        return false;
    }

    if (cl4.in_debug && typeof return_data.debug_msg != 'undefined'/* && return_data.debug_msg != ''*/) {
        cl4.add_ajax_error(return_data.debug_msg);
    }

    // check to see if we've received the status, because we need it for the rest
    if (typeof return_data.status == 'undefined') {
        return;
    }

    switch (return_data.status) {
        // successful
        case 1 :
            return true;
            break;
        // not logged in
        case 2 :
            cl4.add_default_ajax_error(return_data, 'You are no longer logged in. <a href="/login">Click here to login.</a>');
            return false;
            break;
        // timed out
        case 3 :
            cl4.add_default_ajax_error(return_data, 'Your login has timed out. To continue using your current login, <a href="/login/timedout">click here to enter your password.</a>');
            return false;
            break;
        // not allowed (permissions)
        case 4 :
            cl4.add_default_ajax_error(return_data, 'You do not have the necessary permissions to access some of the functionality on this page.');
            return false;
            break;
        // unknown error
        case 0 :
        default :
            cl4.add_default_ajax_error(return_data);
            return false;
    }
};

/**
* ajax error function, will show a red div at the top of the page if there is a problem with any of the ajax on the page
*/
cl4.add_ajax_error = function(error) {
    $('#ajax_errors').append('<div>' + error + '</div>');
    $('#ajax_errors div').click(function() {
        $(this).slideUp(function() {
            $(this).remove();
        });
    }).slideDown();
};

/**
* Adds a default message if there is no error_msg in the return_data object
*/
cl4.add_default_ajax_error = function(return_data, default_msg) {
    if (arguments.length == 1) {
        default_msg = cl4.default_error_msg;
    }

    if (return_data !== null && typeof return_data == 'object' && typeof return_data.error_msg != 'undefined' && return_data.error_msg != '') {
        cl4.add_ajax_error(return_data.error_msg);
    } else {
        cl4.add_ajax_error(default_msg);
    }
};

对此有什么想法吗?有更好的方法吗?除了无法解析的数据或 404(或类似)错误之外,我没有发现太多关于处理 AJAX“错误”的信息。另外,有没有更好的方法来处理 jQuery 中的这些类型的错误。 (我尝试使用成功处理程序,但它们似乎都在当前请求的成功处理程序之后运行。)

抱歉,代码量太大了……我希望它更短一些,但是

顺便说一句,我想将其设置为社区 wiki,但由于某种原因我没有复选框。

最佳答案

如果你的检查函数返回一个 bool 值来指定处理程序是否应该继续执行,那么你可以做类似的事情会更清晰:

$.getJSON('/path/to/page?c_ajax=1', function(return_data) {
    if(!cl4.process_ajax(return_data)) return;
    $('#div').html(return_data.html);
});

当然你也可以在 if block 中清除你的 div - 但我认为这个例子很好地展示了我的意图(如果可以在错误检查器中完成,则不要在处理程序本身中编写与基本错误检查相关的代码本身)。

关于javascript - 处理 AJAX 错误、未登录等 - 关于此方法的想法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5344882/

相关文章:

javascript - 在 Rails 中有没有办法为文本实现 image_tag 类型的鼠标悬停? JavaScript 和 CSS 解决方案不起作用

javascript - 双 jsTree 实现

javascript - 当文件存在时,php无法打开流

javascript - 如何在网页中集成 AIML 聊天机器人

javascript - 如何将 JSON 对象传递给 node.js 服务器

php - 使用 JSON(跨域)将数据发送到 php

javascript - 将 db url 作为 ajax 参数传递

javascript - 在文本框中输入数据,将其保存到html表格中

javascript - AJAX 调用后 formatCurrency 不起作用

javascript - 如何在使用 jquery 执行 ajax 操作后清空 TINYMCE 内容