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

正在使用此代碼現在顯示一條消息，隨着Ajax提交表單

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

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

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

感謝

來源

2014-03-27 jonah

你看過ajaxStart（）和ajaxStop（）嗎？ https://api.jquery.com/ajaxStart/ –

我沒有，但現在我有。謝謝 – jonah

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

來源

2014-03-27 16:55:56

感謝您的幫助@think不同 – jonah

這裏是如何

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

來源

2014-03-27 16:52:39

謝謝@Aamir。你的代碼幾乎和以前的代碼類似。謝謝 – jonah

使用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); 
    } 
});

來源

2014-03-27 16:54:20 Vasu

謝謝@vasu代碼很好用 – jonah

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

希望這有助於！

來源

2014-03-27 17:05:41 LHH

它的工作原理與其應該做的相反。 div顯示默認情況下隱藏，而jQuery的工作。無論如何，Ave使用了先前的方法。謝謝@lalitharyani – jonah

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

回答

相關問題