JQuery fadeOut 不适用于 ajax 发布请求答案

【问题标题】：JQuery fadeOut not working for ajax post requestJQuery fadeOut 不适用于 ajax 发布请求
【发布时间】：2014-09-09 21:20:22
【问题描述】：

我有这个 JQuery 代码：

$(function(){
    $('input#SearchGo').on('click', function(){
        var searchid = $('input#search').val();
        var dataString = 'search='+ searchid;
        $.ajax({
            type: "POST",
            url: "tickets.php",
            data: dataString,
            cache: false,
            success: function(html) {
                $("#result").html(html).show();
            }
        });
        return false;    
    });
});

进行实时搜索并将数据发布到 PHP 页面。

在每个页面上，我都有一个 id 为叠加的 div，页面加载时带有加载图像，然后是这段代码：

$(window).load(function(){
   // PAGE IS FULLY LOADED  
   // FADE OUT YOUR OVERLAYING DIV
   $('#overlay').fadeOut();
});

页面加载后删除覆盖 div。

当我运行搜索查询时，覆盖 div 根本不淡出，我尝试在我的函数的成功部分添加 $('#overlay').fadeOut();，但它不会淡出 div。

更新：

这里是加载/覆盖 div 的 HTML

<div id="overlay" class="overlay">
     <img src="images/integra_loading.gif" alt="Loading" width="12%" style="margin-top:15%;" />
     <br /><br />
     <h1>Loading...</h1>
</div>

【问题讨论】：

请提供一些 HTML，特别是覆盖 div。
检查更新的问题
您使用的是哪个浏览器？检查 javascript 控制台是否有任何错误。
如果你从控制台运行$('#overlay').fadeOut();，它会淡出吗？
如何从控制台运行它？

标签： javascript php jquery html ajax

【解决方案1】：

$(function(){//this says the dom is ready
    $('#overlay').fadeOut();
});

或者

$(document).on("ajaxComplete", function(){
    $('#overlay').fadeOut();
});

【讨论】：

【解决方案2】：

不要使用从通过 ajax 请求加载的 html 脚本调用的函数来隐藏 ajaxloader。只需在请求之前显示加载器并在用您的响应替换 html 内容之前将其隐藏。

function loader(){
    this.id = '#overlay'
};

loader.prototype.show = function(){
    $(this.id).fadeIn();
};

loader.prototype.hide = function(){
    $(this.id).fadeOut();    
};

loaderObj = new loader();

$('.list').live('click', function() {
    loaderObj.show();
    $.ajax({
        type: "GET",
        url: "http://echo.jsontest.com/uid/12345/value/nuno_bettencourt",
        cache: false,
        dataType: "json",
        success: function(json) {
            // setTimeout only to delay the response and let the loader do his thing ;)
            setTimeout(function(){
                loaderObj.hide();
                $('#ajaxResult').html("UID=" + json.uid + "\nName=" + json.value);    
            }, 2000);

        }
    });

我给你做了一个小小提琴的例子http://jsfiddle.net/358Fz/1/

【讨论】：

【解决方案3】：

在完成 $.ajax 之后，添加一个 done。完成后，做淡出！

    $.ajax({
         ...
    }).done(function(){
         $('#overlay').fadeOut();
    });

您可以在失败时添加 .fail 等。请参阅：http://api.jquery.com/jquery.ajax/

【讨论】：

【解决方案4】：

只需在单击事件之外定义加载程序变量，然后在需要时使用它。如果您只需要遍历 DOM 一次来定位 loader 元素，那么开销将会更少。您还可以将 on 事件更改为仅单击事件以节省一些击键，除非您需要将该事件委托给另一个元素。此外，您不需要查找 $(input#search) 因为 ID 是唯一的。去掉变量选择器，只查找ID会更高效。

$(function() {
    var $loader = $('#overlay');
    $('.list').click(function(){
        $loader.fadeIn();
        $.ajax({
            type: "GET",
            url: "http://time.jsontest.com/",
            dataType: 'json',
            cache: false,
            success: function(json) {
                 $loader.fadeOut();
                $("#axajResponse").html('<b>Current Time:</b> ' + json.time).show();
            }
        });
        return false;    
    });
});

在上面的示例中，我将返回当前时间，以便您可以看到每个点击事件的响应变化。

这里是一个例子：http://jsfiddle.net/bradlilley/jLG4g/

【讨论】：