logo标签列表

如何使用jQuery中的ajaxstart和ajaxstop来配合$.post方法？

jqueryajax
10

基本上我想展示一个加载动画...

这是我正在使用的代码：

$("#mail-change input[type=submit]").click(function(event){

$.post('user_settings.php', $("#mail-change").serialize(), function(res) {

$(res).insertBefore(".grey");

}, 'html')

});
1个回答
15
$("#loading").ajaxStart(function() {
    $(this).show();
}).ajaxStop(function() {
    $(this).hide();
});

编辑：

$("#mail-change input[type=submit]").click(function(event){
    $("#loading").show()
    $.post('user_settings.php', $("#mail-change").serialize(), function(res) {
        $(res).insertBefore(".grey");
        $("#loading").hide();
    }, 'html');
});
或：
$.ajax({
   url : 'user_settings.php',
   data: $("#mail-change").serialize(),
   beforeSend: function(){
     $("#loading").show();
   },
   complete: function(){
     $("#loading").hide();
   },
   success: function(res) {
     $(res).insertBefore(".grey");
   }
 });

请参考以下链接：

谢谢您的回复。问题是我在页面上有多个带有$.post请求的表单... 这段代码将被任何一个$.post请求触发。 - pete
@pete - 在这种情况下，我建议在$.post之前显示加载指示器，并在成功回调中再次隐藏它。请参见我的编辑。 - karim79
1
@pete - 还有一件事，你也可以使用$.ajax的beforeSend和complete回调函数。我刚刚又编辑了一次。 - karim79
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接