使用Ajax獲取數據后觸發jQuery重新繪制

Question

大家好

長期聆聽者，初次張貼者...

我的一個客戶被許諾了看似非常復雜的功能。 他們希望將網站訪問者成功登錄到他們的帳戶后，將3個單獨頁面的內容加載到一個頁面中。 他們希望這種情況在不刷新頁面的情況下發生。 解決方案就是Ajax。 但是，我對Ajax經驗不足。

我在弄清楚如何分辨$ .get命令（使用jQuery的Ajax命令）何時完成其內容加載時遇到了麻煩。 我的方法是，一旦登錄成功，就去獲取3個單獨的頁面，將其XHTML內容加載到變量中，然后重新繪制頁面。 在下面，您將看到我的偽代碼。 我使用“ XXItemXX”代替實際路徑。 我嘗試插入的每個結果頁面都有一個div，其中的類“ content”圍繞着要檢索的數據。 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命令來繪制頁面。 恐怕我最大的絆腳石是在與Google進行搜索以了解其他人如何處理此問題時如何闡明這一點。 我不確定如何用10個字以內或少於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

Answer 1

如果您的問題是等待所有3個請求都返回，則：

將結果存儲在范圍更大的變量中，以便每個回調都可以訪問它們
在相同范圍內添加變量drawing
在每個回調中，檢查所有3個變量是否均為非null以及drawing是否為false
如果是這種情況，則將drawing設置為true，然后執行工作

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

使用Ajax獲取數據后觸發jQuery重新繪制

問題描述

2 個解決方案

解決方案1
0 2014-06-27 12:57:02

解決方案2
0 2014-06-27 15:24:20

使用Ajax獲取數據后觸發jQuery重新繪制

問題描述

2 個解決方案

解決方案1 0 2014-06-27 12:57:02

解決方案2 0 2014-06-27 15:24:20

解決方案1
0 2014-06-27 12:57:02

解決方案2
0 2014-06-27 15:24:20