什麼是最簡單/最好的方式來表明一個HTML元素是AJAX加載？

有時在我的應用程序中有許多元素正在加載，所以我想在禁用它的控件（或DOM節點）上方顯示典型的AJAX微調器。什麼是最簡單/最好的方式來表明一個HTML元素是AJAX加載？

什麼是最簡單/最好的方法來做到這一點？

理想情況下，我想：

$("#myelement").loading(); 
$("#myelement").finishloading();

甚至更好能夠直接與元素做AJAX請求：

$("#myelement").post(url, params, myfunction);

作爲#myelement一個普通節點或表單輸入。

來源

2010-01-11 Eduardo

，你可能想看看BlockUI連同Darin Dimitrov's answer。我今天剛剛遇到過這個問題，但我自己還沒有用過它，但它看起來不錯。

如果你正在編寫一個半大型的應用程序，並且預計會在你的代碼中的不同地方做出很多AJAX調用，我建議你在$.ajax之上添加一個抽象層，或者創建一個輔助函數來避免爲你的用戶界面指示器遍佈各處。如果你需要改變你的指標，這將會幫助你很多。

抽象方法

var ajax = function(options) { 
    $.ajax($.extend(
     { 
      beforeSend: function() { 
       $.blockUI(); 
      }, 
      complete: function() { 
       $.unblockUI(); 
      } 
     }, 
     options 
    )); 
}; 

ajax({ 
    url: 'script.cgi', 
    type: 'POST', 
    success: function(result) { 
     // todo: do something with the result 
});

Helper方法

var ajaxSettings = function(options) { 
    return $.extend(
     { 
      beforeSend: function() { 
       $.blockUI(); 
      }, 
      complete: function() { 
       $.unblockUI(); 
      } 
     }, 
     options 
    ); 
}; 

$.ajax(ajaxSettings({ 
    url: 'script.cgi', 
    type: 'POST', 
    success: function(result) { 
     // todo: do something with the result 
    } 
}));

而且，我不會建議覆蓋$.ajax方法本身。

來源

2010-01-11 22:01:31

我正在使用jQuery BlockUI Element Blocking http://jquery.malsup.com/block/#element – Eduardo 2010-06-16 09:53:30

我過去所做的是，在post上傳遞元素id（一個包含div）到一個函數，該函數用一個加載圖像替換它的內部HTML，然後在後期將其內容替換爲更新的真實內容。

來源

2010-01-11 20:44:56 pstanton

你能提供一個工作的例子嗎？ – Eduardo 2010-02-02 22:15:05

你可以使用beforeSend和complete回調：既然你已經使用jQuery

$.ajax({ 
    url: 'script.cgi', 
    type: 'POST', 
    beforeSend: function() { 
     $('.spinner').show(); 
    }, 
    complete: function() { 
     // will trigger even if request fails 
     $('.spinner').hide(); 
    }, 
    success: function(result) { 
     // todo: do something with the result 
    } 
});

來源

2010-01-11 20:46:10

理想情況下，你會寫一個簡單的jquery插件/包裝來簡化這個過程......但是肯定已經存在的東西？ – 2010-01-11 22:08:13

如果您想在每次進行ajax調用時顯示微調器，我認爲您應該使用ajaxStart和ajaxStop。

$("#spinner") 
    .ajaxStart(function(){$(this).show();}) 
    .ajaxStop(function(){$(this).hide();});

來源

2010-04-09 10:35:32 fgui

什麼是最簡單/最好的方式來表明一個HTML元素是AJAX加載？

回答

相關問題