Jquery Ajax在获取数据时加载图像

我在点击事件中使用Jquery Ajax函数从数据库中获取数据。

此function正常工作并显示数据。 但是加载数据需要时间，因此我想在获取数据的同时放置加载图像。 我用这种方法来做

 jQuery(function($) { $(document).ready(function() { $("#imgs").hide(); $(".letter").bind('click', function(){ $("#imgs").fadeIn(); var val = $(".letter").val; var site = ''; $.ajax({ url: site+'/wp-content/themes/premiumnews/newContent.php?letter='+$(this).html(), success:function(data){ $("#imgs").hide(); $("#content1").html(data); } }); }); }); });  

当我点击按钮时，会出现加载图像，但成功后图像应该消失，在我的情况下它仍然存在

我的代码错了吗？ 或者我使用了错误的方法？

Answer 1

这是我过去一直使用的：

 $('#loading_div').hide().ajaxStart(function(){ $(this).show(); }).ajaxStop(function() { $(this).hide(); }); 

Answer 2

就在$ .ajax（）之前; 打电话来做这个。 在ajax调用之前用这个替换整个html。 然后onsuccess将整个html替换为您的内容。

 $("#content1").html(""); 

Answer 3

从我可以告诉你的代码看起来很好。 你确定正在调用成功函数吗？ 尝试向成功函数添加alert("")并查看是否成功调用。 如果没有，那就是你的问题。

Answer 4

 $("#report").live( "submit" , function(){ // Add loading image until get the results $("#loading_div").html(""); var formdata = $(this).serialize(); // Get $.post( "ajax_report.php", formdata, function( data ) { $("#results").html ( data ); // Add success data in '#results' element $("#loading_div").empty(); // Remove loading image on success }); return false; }); 

在页面中添加这些行。