使用 Ajax 获取数据后触发 jQuery 重绘答案

【问题标题】：Triggering a jQuery Re-Draw After Getting Data With Ajax使用 Ajax 获取数据后触发 jQuery 重绘
【发布时间】：2014-08-18 14:06:41
【问题描述】：

大家好，

长期聆听者，第一次发帖...

我有一个客户被承诺提供看似非常复杂的功能。他们希望在访问他们网站的访问者成功登录到他们的帐户后，将 3 个单独页面的内容加载到一个页面中。他们希望在不刷新页面的情况下发生这种情况。 Ajax 是解决方案。但是，我对 Ajax 没有经验。

我无法弄清楚如何判断 $.get 命令（使用 jQuery 的 Ajax 命令）何时完成加载其内容。我的方法是，一旦登录成功，就去获取 3 个单独的页面，将它们的 XHTML 内容加载到变量中，然后重新绘制页面。下面你会看到我的伪代码。我使用“XXItemXX”代替实际路径。我试图拉入的每个结果页面都有一个 div，其中包含我想要检索的数据的类“内容”。 XHTML 看起来像这样：

<html>
    <head>
        <title>Page Name</title>
    </head>
    <body>
        <div id="header">...</div>
        <div class="content">
        .
        .
        .
        </div>
        <div id="footer">...</div>
    </body>
</html>

我构建的 jQuery 代码如下。我可以提交表单，甚至可以从各种 .get 命令中取回内容。问题是，我似乎无法像往常那样以菊花链方式连接事物。我正在努力弄清楚如何仅在成功检索所有 3 个命令后才触发 jQuery 命令来绘制页面。恐怕我最大的绊脚石是在用谷歌搜索时如何表达这一点，看看其他人是如何处理这个问题的。我不确定如何用 10 个字或更少的词或以实际返回我需要的信息的方式来描述我想要完成的工作。

有人可以帮忙吗？恐怕我的时间太少，学的太多了。

<script type="text/javascript">
$('XXLoginFormXX').submit(function () {
    $.ajax({  
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        beforeSend: function() {
            $('<div class="loading">Loading...</div>').insertBefore('XXLoginFormXX').css('position','absolute');
        },
        success: function(data) {  
            // On successful login, draw page. 
            $('.loading').fadeOut('slow');
            var dr_editProfileXHTML, dr_accountOrderListXHTML, dr_wishListsXHTML;
            $.get('XXPathToEditProfilePageXX', function(data1){
                var dr_editProfileXHTML = $('div.content', data1);
            });
            $.get('XXPathToAccountOrderListPageXX', function(data2){
                var dr_accountOrderListXHTML = $('div.content',data2);
            });
            $.get('XXPathToWishListsPageXX', function(data3){
                var dr_wishListsXHTML = $('div.content',data3);
            });
            $('div.content').fadeOut(function(){
                $(this).html(dr_editProfileXHTML);
                $('XXEditProfileXHTMLXX').before(dr_accountOrderListXHTML);
                $('XXEditProfileXHTMLXX').before(dr_wishListsXHTML);
            }).fadeIn();
        }
    }); 
    return false;
});
</script>

非常感谢您的时间、帮助和考虑。

你的， Sylvan012

【问题讨论】：

您似乎知道如何编码，所以我将其作为评论发布 - 您看过 ajax when() 和 done() 吗？ api.jquery.com/jquery.when
在您的 AJAX 调用完成后，您似乎能够获取内容并成功调用将您的内容注入到 dom 中，但是您很难等待所有内容都完成下载后再显示他们都对用户正确吗？如果是这种情况，我将通过以下两种方式之一来处理：要么继续填充所有 3 个容器并默认隐藏它们。当您的 ajax 调用完成时，让他们也检查其他 2 个容器的内容。如果它们都填充了数据，则执行 $.show();显示隐藏的容器
戴夫 - 谢谢；我会调查的。
Andrew - 我不确定如何判断所有 3 个 .get 命令何时完成。
戴夫在这里是正确的。您可以使用 jQuery.when() 或构建自己的 ajax 队列管理器。 This questions 第一个答案有一个很好的起点来构建你自己的。

标签： javascript jquery ajax simultaneous simultaneous-calls

【解决方案1】：

如果您的问题是等待所有 3 个请求都返回，那么：

将结果存储在范围稍高的变量中，以便每个回调都可以访问它们
在同一范围内添加变量drawing
在每个回调中，检查所有 3 个变量是否为非 null 且 drawing 是否为 false
如果是这种情况，则将 drawing 设置为 true，然后开始工作

【讨论】：

【解决方案2】：

在人们的慷慨帮助下完成这项工作后，我相信我已经做到了。感谢 Dave Briand，他教会了我关于 .when 和 .then 的知识。

以下是我想出的伪代码。它似乎正在工作！当然有很多清理工作要做，但是现在所有三个页面都被拉入了！哇！

你觉得我的解决方案怎么样？

<script type="text/javascript">
$('XXLoginFormXX').submit(function () {
    $.ajax({  
        type: $(this).attr('method'),
        url: $(this).attr('action'),
        data: $(this).serialize(),
        beforeSend: function() {
            $('<div class="loading">Loading...</div>').insertBefore('XXLoginFormXX').css('position','absolute');
        },
        success: function(data) {  
            // On successful login, draw page. 
            var Page01XHTML;
            var Page02XHTML;
            var Page03XHTML;

            $.when(
                $.get('XXPathToEditProfilePageXX', function(data1){
                    var Page02XHTML = $('div.content', data1);
                }),
                $.get('XXPathToAccountOrderListPageXX', function(data2){
                    var Page03XHTML = $('div.content',data2);
                }), 
                $.get('XXPathToWishListsPageXX', function(data3){
                    var Page01XHTML = $('div.content',data3);
                })
            ).then(function(Page02XHTML,Page03XHTML,Page01XHTML){
                $('.loading').fadeOut('slow');
                $('div.content').fadeOut(function(){
                    $(this).attr('id','MyAccount').html(' ' + Page01XHTML + Page03XHTML + Page02XHTML + ' ').parents('body').find('.content').each(function(){
                        dr_thisID = $(this).attr('id');
                        if (dr_thisID != 'MyAccount') {
                            $(this).appendTo($('div#MyAccount'));
                        }
                    }).parents('div#MyAccount').children().each(function(){
                        dr_thisClass = $(this).attr('class');
                        if (dr_thisClass != 'content') {
                            $(this).remove();
                        }
                    });
                }).fadeIn();
            });
        }
    }); 
    return false;
});
</script>

【讨论】：