2

皆さん、こんにちは。

長年のリスナー、初めてのポスター...

非常に複雑に見える機能を約束されたクライアントがいます。サイトへの訪問者がアカウントに正常にログインした後、3 つの別々のページのコンテンツを 1 つにロードしたいと考えています。彼らは、ページを更新せずにこれを実現したいと考えています。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コマンドのみを起動してページを描画する方法を理解するのに苦労しています。残念ながら、私の最大のつまずき点は、他の人がこの問題にどのように対処したかを Google で検索するときに、これを明確に表現する方法です。私が達成しようとしていることを 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>

お時間をいただき、ご協力、ご配慮いただき、誠にありがとうございました。

よろしく、シルバン012

4

2 に答える 2

0

人々の惜しみない助けを借りてこれに取り組んだ後、私はそれを手に入れたと信じています. .when と .then について教えてくれた Dave Briand に感謝します。

以下は、私が思いついた疑似コードです。効いているようです！確かに、やるべきことはたくさんありますが、3 つのページすべてが取り込まれています。うわー！

私の解決策についてどう思いますか？

<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 に答える