2

大家好，

长期听众，第一次海报...

我有一个客户，他被承诺提供看似非常复杂的功能。他们希望在访问他们网站的访问者成功登录到他们的帐户后，将 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

4

2 回答 2

0

在人们的慷慨帮助下，我相信我已经做到了。我要感谢 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>
于 2014-06-27T15:24:20.650 回答
0

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

  1. 将结果存储在范围稍高的变量中，以便每个回调都可以访问它们
  2. drawing在同一范围内添加一个变量
  3. 在每个回调中，检查所有 3 个变量是否为非空且drawing为假
  4. 如果是这种情况，则设置drawing为 true，然后完成工作
于 2014-06-27T12:57:02.370 回答