根据ajax行为在jquery中显示消息框

Question

我使用这个 jquery 代码向服务器发送请求并从服务器获取响应。在这里，我正在使用此响应数据更新一个表。这个过程运行良好。

我的问题是我需要根据脚本的行为显示一些消息。这意味着当表格更新时，我需要显示类似于“正在加载，请稍等几秒钟”的消息。更新表格后，我需要显示类似“万岁，您已成功更新用户表格”的消息。

谁能告诉我我是如何用 jquery 完成这个任务的？

这是我目前的代码：

$.ajax({
    type: "POST",
    url: "process.php", 
    dataType: 'html',
    data: { 
        name: $('#name').val(), 
        address: $('#address').val(), 
        city: $('#city').val() 
    },
    success:function(data){
        $('#manage_user table > tbody:last').find('tr:first').before(data);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }, 
    complete: function(){
        //alert('update success'); 
    }
});

谢谢。

Answer 1

你可以这样做：

$.ajax({
    type: "POST",
    url: "process.php", 
    dataType: 'html',
    data: { 
        name: $('#name').val(), 
        address: $('#address').val(), 
        city: $('#city').val() 
    },
    beforeSend: function(){$('#loading').show();},
    success:function(data){
        $('#manage_user table > tbody:last').find('tr:first').before(data);
    },
    error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
    }, 
    complete: function(){
        $('#loading').hide(); 
    }
});

HTML：

<img id="loading" src="loading.gif"/>

CSS：

#loading{display:none}

Answer 2

您可以附加此处理程序以在触发 ajax 事件时启动。

$(document).ajaxStart(function() {
         $( ".message" ).text( "加载表格" );
    });

并使用完成的处理程序允许您显示完成的消息

<pre>$(document).ajaxComplete(function() {
   $( ".message" ).text( "Table Loaded" );
});</pre>