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

我使用jQueryAjax函数从数据库中获取数据，点击事件

此功能工作正常并显示数据。 但是加载数据需要时间，所以我想在提取数据时放置一个加载图像。 我用这个方法做的

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

jQuery（函数（$）{
$（文档）.ready（函数（）{
$（“#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（），
成功：功能（数据）{
$（“#imgs”）.hide（）；
$（“#content1”）.html（数据）；
}
});
});
});
});

当我点击按钮时，加载图像出现，但成功后图像应消失，在我的情况下，图像仍保留在那里

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

就在您的$.ajax（）之前；打电话做这个。在ajax调用之前，用这个替换整个html。然后，一旦成功，整个html将替换为您的内容

$("#content1").html("<img style=\"margin-left: auto; margin-right: auto;\" src=\"ajax-loader.gif\" alt=\"Loading...\" title=\"Loading...\" />");

$（“#content1”）.html（“”）；

据我所知，代码看起来不错。您确定正在调用success函数吗？尝试将

警报（“”

添加到success函数中，查看是否成功调用该函数。如果不是你的问题。

这是我过去一直使用的：

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

$（“#报告”）.live（“提交”，函数（）{
//添加加载图像直到得到结果
$（“#加载分区”）.html（“”）；
var formdata=$（this）.serialize（）；//获取
$.post（“ajax_report.php”），formdata，function（data）{
$（“#results”）.html（data）；//在“#results”元素中添加成功数据
$（“#加载_div”）.empty（）；//成功后删除加载图像
});
返回false；
});

在页面中添加这些行

<span id="loading_div"></span>
<span id="results"></span>
<form id="report" name="report" action="" method="post">
    <input name="firstname" value=""></input>
    <input name="middlename" value=""></input>
    <input name="lastname" value=""></input>
</form>

---

欢迎使用堆栈溢出！与其只发布一段代码，不如解释一下为什么这段代码可以解决这个问题。没有解释，这不是答案。

<span id="loading_div"></span>
<span id="results"></span>
<form id="report" name="report" action="" method="post">
    <input name="firstname" value=""></input>
    <input name="middlename" value=""></input>
    <input name="lastname" value=""></input>
</form>