顯示一條消息，隨着Ajax提交表單

Question

正在使用此代碼現在

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

提交表單。如何顯示，而Ajax是提交表單假設我希望它顯示

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

感謝

Answer 1

<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 2

這裏是如何

HTML

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

CSS

的請稍候GIF

#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(); 
    } 
}); 

Answer 3

使用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 4

您可以使用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(); 
}); 

希望這有助於！