Question

使用此代码提交表单

$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    success:function(feedback){
        reload();
        // alert (feedback);
    }
});

现在。如果ajax提交表单，我如何显示请等待gif，假设我希望它显示在

中

<div id="working"></div>

由于

Answer 1

使用ajax的beforeSend和complete设置。 Documentation

试试这个：

$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    beforeSend: function() {
        $('#working').show();
    },
    complete: function() {
        $('#working').hide();
    },
    success:function(feedback){
        reload();
        // alert (feedback);
    }
});

Answer 2

<div id="working"><img src="loader.gif" style="display:none;"/></div>


$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    beforeSend: function(){
       $('#working img').show();  
    }, 
    complete:function(){
       $('#working img').hide();     
    },
    success:function(feedback){
        reload();
        // alert (feedback);
    }
});

Answer 3

您可以像这样使用ajaxStart和ajaxStop

//show image when clicks on submit button
$('form').ajaxStart(function() {
  $('#working').show();
});

//hide image when ajax request stop
$('form').ajaxStop(function() {
  $('#working').hide();
});

希望这有帮助！

Answer 4

以下是

HTML

<div id="working"><img src="loader.gif"/></div>

CSS

#working { display: none; }

JS：

var $loader = $('#working');
$loader.show();
$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    success:function(feedback){
        reload();
        $loader.hide(); //or .fadeOut();
    }
});

或尝试beforeSend

var $loader = $('#working');
$.ajax({
    type:'GET', 
    data:fields,
    url:'new/addcomm.php',
    beforeSend: function(){
       $loader.show();
    },
    success:function(feedback){
        reload();
        $loader.hide(); //or .fadeOut();
    }
});

在ajax提交表单时显示消息

4 个答案: