2011-03-17 73 views
3

我想用jQuery來設置一個通用的AJAX成功/錯誤處理程序,我可以在多個項目上使用它。我之所以這樣做是因爲在AJAX請求期間可能發生的一些可能的「錯誤」。下面是我到目前爲止已經處理了那些有資格編號:處理AJAX錯誤,未登錄等 - 對此方法的想法?

  • 0:未知錯誤
  • 1:成功
  • 2:未登錄
  • 3:超時
  • 4:不允許(根據權限)
  • 的404

對於第5個錯誤,我不得不處理他們手動。爲此,我能找到的唯一方法是在AJAX調用的成功函數內運行cl4.process_ajax方法,並使用JSON數據中的狀態鍵/屬性來確定狀態。對於404或其他AJAX錯誤(即不可解析的JSON),我在jQuery中使用了全局事件處理函數ajaxError()

其基本思想是當出現錯誤時,屏幕頂部的屏幕頂部會顯示一個錯誤,並滑動以使其看起來很「漂亮」。每個錯誤都可以點擊來隱藏它們。

這是我如何使用它的一個例子。 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中的這些類型的錯誤。 (我嘗試使用成功處理,但他們似乎對當前請求的成功處理程序後要全部運行。)

很抱歉的代碼量...我想這是短,但

BTW ,我想將其設置爲社區wiki,但由於某種原因,我沒有複選框。

+0

出現錯誤時使用HTTP狀態代碼可能會更乾淨。然後錯誤處理程序將始終在發生錯誤時調用,並且在發生錯誤時將成功處理程序。這最大限度地減少了客戶端的錯誤處理代碼,並且通常也不會使服務器端代碼更加困難。 – 2011-03-18 18:22:06

回答

1

這將是更清潔的,如果你的檢查函數返回一個布爾值,指定如果處理程序應繼續執行還是不那麼你可以做這樣的事情:

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

當然,你也可以清除格在if塊 - 但我認爲這個例子很好地展示了我的意圖(如果可以在錯誤檢查器本身中完成,則不會在處理程序本身中編寫與基本錯誤檢查相關的代碼)。

+0

我在這種情況下做到這一點的原因,儘管在很多情況下我會說你說的:(1)我在AJAX請求之前在div中加載了一個加載圖標,(2)它允許我返回HTML if有一個問題將被放入div中。 – 2011-03-17 23:17:37