Question

如何在完成ajax调用后隐藏div，我的代码如下所示...在此代码中div隐藏在刷新之前

$(document).ready(function() {
    $('#search-button').click(function() {
        $('#imgLoader').show();
        var request = $.ajax({
            type: "GET",
            url: 'response.php',
            data: $('#search-form').serialize(),
            success: function(response) {
                var url = 'detail_page.php';
                $('#my_cart').load(url + ' #mycart');
                $('#refcart').load(url + ' #shoppingCart');
                $('#imgLoader').hide();
            }
        })
    });
});

图像加载器在完成两个div的刷新之前隐藏。请帮帮我

Answer 1

查看http://api.jquery.com/load/

您可以向.load方法添加一个回调，该方法将在元素完全加载后触发。

$( "#result" ).load( "ajax/test.html", function() {
  alert( "Load was performed." );
});

在你的情况下，类似的东西：

 $('#my_cart').load(url + ' #mycart', function () {
   $('#imgLoader').hide();
 );

Answer 2

可能的解决方案是使用load的完整参数：

success: function(response) {
    var url = 'detail_page.php';
    $('#my_cart').load(url + ' #mycart', function() {
        $('#refcart').load(url + ' #shoppingCart', function() {
            $('#imgLoader').hide();
         });
    });
}

请记住，这不是最佳解决方案，因为第二次加载将在第一次加载完成之前执行。

编辑：我建议你使用tokens：

success: function(response) {
    var myCartLoaded = false;
    var refCartLoaded = false;
    var url = 'detail_page.php';
    $('#my_cart').load(url + ' #mycart', function() {
        myCartLoaded = true;
        if(refCartLoaded) { 
            $('#imgLoader').hide();
            myCartLoaded = false;
            refCartLoaded = false;
        } 
    });
    $('#refcart').load(url + ' #shoppingCart', function() {
        refCartLoaded = true;
        if(myCartLoaded) { 
            $('#imgLoader').hide();
            myCartLoaded = false;
            refCartLoaded = false;
        } 
    });
}

这样两个加载函数将同时启动，而最后停止的函数将触发隐藏imageLoader。

Answer 3

您的代码中有多个错误：

您发出ajax请求以获取搜索结果，但您没有使用该搜索结果成功函数内response。 $().load是异步的，
表示您应该等待每个$().load请求的结束隐藏#imgLoader

$（）。加载就像这样

.load（url [，data] [，complete]）

你应该使用承诺来使其发挥作用。

$(document).ready(function() {
    $('#search-button').click(function() {
        $('#imgLoader').show();
        // create the deffered instances
        var myCartDeferred = $.Deferred();
        var refCartDeffered = $.Deferred();

        // $.ajax also return a deffered
        var request = $.ajax({
            type: "GET",
            url: 'response.php',
            data: $('#search-form').serialize(),
            success: function(response) {
                var url = 'detail_page.php';

                $('#imgLoader').hide();
            }
        })

        // Setup the chain of events
        $.when(myCartDeferred, refCartDefferd, request).then(function() {
            alert('done');
        });

        // start the load actions at the same time than the $.ajax and pass the deferred.resolve as complete param
        $('#my_cart').load(url + ' #mycart', myCartDeferred.resolve);
        $('#refcart').load(url + ' #shoppingCart', refCartDeffered.resolve);
    });
});

Answer 4

jQuery .load返回jquery对象，等待多个加载发生时不方便。您可以添加返回承诺的自定义promiseToLoad方法。

<强> NB！ Haven未对此代码进行测试。

$.fn.promiseToLoad = function(url, data) {
    var dfd = $.Deferred(),
        jquery = this;
    jquery.load(url, data, function() {
        if(dfd.state() === 'pending') {
            dfd.resolveWith(jquery, jquery);
        }
    });
    return dfd.promise();
}

然后

var myCart = $('#my_cart').promiseToLoad(url + ' #mycart'),
    refCart = $('#refcart').promiseToLoad(url + ' #shoppingCart');

$.when(myCart, refCart).then(function() {
    $('#imgLoader').hide();
});

如何在完成ajax调用后隐藏div，我的代码在下面给出..在此代码div中，在刷新之前隐藏

4 个答案: