從jQuery調用AJAX並顯示一條等待消息

Question

我對jQuery的AJAX調用非常新穎，我有點卡住試圖做到這一點;我有jQuery的這樣一個AJAX調用：

$(document).ready(function() { 
$('tr.table-row').click(function(){ 
$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) {//the_output_here}}); 
}); 
}); 

這個腳本是當用戶點擊從表中特定行（<tr></tr>）觸發一個網頁內。 stats-render.php輸出帶有一些信息和圖形的HTML文本。這個答案有時需要一段時間（15秒），所以我想向用戶展示一個等待消息，當他/她觸發腳本時，以及何時該調用返回一個答案，在div中顯示輸出文本（我們稱之爲<div id="render-div">） 。

所以問題是，我該如何顯示一個等待消息？如果你知道一個很好的腳本來顯示這種模式，我將不勝感激。

如何將stats-render.php的結果輸出到div？中。謝謝你的幫助！

Answer 1

在div其中導致臨時去只是顯示加載消息。

$(document).ready(function() { 
    $('tr.table-row').click(function(){ 
    $.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) { $('div.for-results').html(/* d... */); }); 
    $('div.for-results').html('loading...'); 
    }); 
}); 

或者更有趣：

$(document).ready(function() { 
    $('tr.table-row').click(function(){ 
    $.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) { 
     clearInterval(loading); 
     $('div.for-results').html(/* d... */); 
    }); 
    $('div.for-results').html('loading'); 
    var loading = setInterval(function() { $('div.for-results')[0].innerHTML += '.' }, 1000); 
    }); 
}); 

Answer 2

最簡單的方法可能是檢查出jquery-loading plugin。

Answer 3

我只是做一個簡單的顯示消息的呼叫之前，並隱藏它的成功回調是這樣的：

但是我認爲當Ajax調用開始，並且當它停止jQuery的可能有一個回調的選擇。

$(document).ready(function() { 
$('tr.table-row').click(function(){ 

//Show the loading message, or chage a css class, or what have you. 
$('#loadingmessagetext').show(); 

$.ajax({ url: 'stats-render.php', data: {ref: $(this).attr('id')}, type: 'post', success: function(d) { 

//Hide the loading message 
$('#loadingmessagetext').hide(); 

//the_output_here 

} 
}); 
}); 
});