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

【问题标题】：Jquery Ajax loading image while getting the dataJquery Ajax在获取数据时加载图像
【发布时间】：2011-07-07 14:34:09
【问题描述】：

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

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

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

【解决方案1】：

这是我过去一直使用的：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

据我所知，代码看起来不错。您确定正在调用成功函数吗？尝试将alert("") 添加到成功函数中，看看它是否被成功调用。如果没有，那就是你的问题。

【讨论】：

【解决方案4】：

$("#report").live( "submit" , function(){
    // Add loading image until get the results
    $("#loading_div").html("<img style=\"margin-left: auto; margin-right: auto;\" src=\"ajax-loader.gif\" alt=\"Loading...\" title=\"Loading...\" />"); 

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

在您的页面中添加这些行。

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

【讨论】：

欢迎来到 Stack Overflow！不要只发布一段代码，请解释为什么这段代码可以解决所提出的问题。没有解释，这不是答案。