从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中的输出文本（让我们称之为{{ 1}}）。

所以问题是，如何显示等待消息？如果你知道一个好的剧本在模态中显示，我会很感激。

如何将<div id="render-div">的结果输出到stats-render.php？谢谢你，任何帮助！

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

我只是在调用之前简单地显示消息，并将其隐藏在成功回调上，如下所示：

但是我认为jquery可能在ajax调用启动时以及停止时有一个回调选项。

 $(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

}
});
});
});