0

Tuts+から WordPress 用の AJAX 投稿ループを実装しようとしています。 このループを 3 つの列 (それぞれ別のカテゴリ) の単一の投稿ページのコメント フォームの下に表示したいです。

single.php には div があります (数値はカテゴリから取得されます):

<div class="news_posts-6"></div>
<div class="news_posts-3"></div>
<div class="news_posts-2"></div>

私のajaxLoop:

jQuery(function($){
var page = 1;
var loading = true;
var $window = $(window);
 var cat = [6,3,2];

var load_posts= jQuery.each(cat, function(){


        var $content = $(".news_posts-" + this);

        $.ajax({
            type       : "GET",
            data       : {numPosts: 2, pageNumber: page, cat: this},
            dataType   : "html",
            url        : "http://127.0.0.1:4001/wordpress/wp-content/themes/twentyeleven-child-theme/loopHandler.php",
            beforeSend : function(){
                if(page != 1){
                    $content.append('<div id="temp_load" style="text-align:center">\
                        <img src="/images/ajax-loader.gif" />\
                        </div>');
                }
            },
            success    : function(data){
                $data = $(data);
                if($data.length){
                    $data.hide();
                    $content.append($data);
                    $data.fadeIn(500, function(){
                        $("#temp_load").remove();
                        loading = false;
                    });
                } else {
                    $("#temp_load").remove();
                }
            },
            error     : function(jqXHR, textStatus, errorThrown) {
                $("#temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
    });


});  

$window.scroll(function() {
    var content_offset = $content.offset();
    console.log(content_offset.top);
    if(!loading && ($window.scrollTop() +
        $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) {
            loading = true;
            page++;
            load_posts();
    }
 });     
 load_posts();
});

loopHandler.php の一部:

$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;
$cat = (isset($_GET['cat'])) ? $_GET['cat'] : 0;

echo $numPosts;
echo $page;

query_posts(array(
       'posts_per_page' => $numPosts,
       'paged'          => $page,
       'cat'          => $cat
));

カテゴリ番号を含む単純な配列を使用しようとしましたが、機能しません。依存する

data       : {numPosts: X, pageNumber: page, cat: this},

各列に X 件の投稿が表示されます (最初のカテゴリの同じ投稿)。

私が試したJSONを使用する必要があると思いますが、それは完全な災害でした（まとめ方がわかりません）。3 つの異なる引数に対して AJAX を呼び出すだけです。

助けてくれてありがとう

4

1 に答える 1

0

さて、これについてはさまざまな方法があります。

1 つの方法は、最初にクライアント側のカテゴリをループし、カテゴリごとに個別のリクエストを作成することです。これは、コードで本質的に行っていることです。一連のカテゴリを繰り返し処理し、それぞれに対してリクエストを作成しています。

もう 1 つの方法は、そのカテゴリの配列をハンドラーに渡すことです。整数またはカテゴリの配列を受け入れるようにハンドラーを変更するだけです。その後、JSON オブジェクトを返すことができます。しかし、これにはさらに多くの編集が必要であり、その上、各セクションのサイズと高さが異なるという問題は解決されません。

したがって、以下では、複数のセクションを追跡するためにコードを少し変更しました。必要な小さな編集がいくつかあります。

  • 各セクションには、カテゴリ番号、ページ番号、コンテンツ セクション、および読み込み中かどうかのフラグが必要です。追跡のために、それぞれを 1 つのリストに格納する必要があります。
  • 各カテゴリを反復して初期化する必要があります。
  • ウィンドウのスクロール時に各カテゴリを反復処理し、次のアイテムをロードする必要があるかどうかを確認する必要があります
  • 各リクエストがリクエストされたカテゴリに関連していることを確認する必要があります

div を少し変更することから始めます (これは好みの問題です。このようなメタデータをクラスではなく属性に保存することをお勧めします)。

<div class="news_posts" data-category="6"></div>
<div class="news_posts" data-category="3"></div>
<div class="news_posts" data-category="2"></div>

これは変更された JS です (いくつかの変数と関数の名前を変更したことに注意してください)。

jQuery(function($){
    var $window = $(window);
    var cats = [];
    var contentDivs = $(".news_posts");

    var initializeCats = function(){
        // adds category objects to a list for tracking
        for(var i = 0; i < contentDivs.length; i++){
            var catNum = $(contentDivs[i]).attr("data-category");
            var cat = {
              catNum  : catNum,
              catPage : 1,
              loading : true,
              catDiv  : $(contentDivs[i]);
            };

            cats.push(cat);

            load_post(cat);
        }
    };

    var load_post = function(cat) {
        $.ajax({
            type       : "GET",
            data       : {
                numPosts   : 2, 
                pageNumber : cat.catPage, 
                cat        : cat.catNum
            },
            dataType   : "html",
            url        : "http://127.0.0.1:4001/wordpress/wp-content/themes/twentyeleven-child-theme/loopHandler.php",
            beforeSend : function(){
                if(page != 1){
                    // this was a bad idea when i wrote the article originally
                    // never concatenate strings on multiple lines by escaping
                    // the carriage return 
                    // $content.append('<div id="temp_load" style="text-align:center">\
                    //    <img src="/images/ajax-loader.gif" />\
                    //    </div>'); 

                    cat.catDiv.append("<div class='temp_load' style='text-align:center'>" +
                        "<img src='/images/ajax-loader.gif' />" +
                        "</div>");
                }
            },
            success    : function(data){
                $data = $(data);

                if($data.length){
                    $data.hide();
                    cat.catDiv.append($data);

                    $data.fadeIn(500, function(){
                        cat.catDiv.find(".temp_load").remove();
                        cat.loading = false;
                    });
                } else {
                    cat.catDiv.find(".temp_load").remove();
                }
            },
            error     : function(jqXHR, textStatus, errorThrown) {
                cat.catDiv.find(".temp_load").remove();
                alert(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
    });  

    var onWindowScroll = function(){
        for(var i = 0; i < cats.length; i++){
            var cat = cats[i];
            var contentDiv = cat.catDiv;
            var content_offset = contentDiv.offset();                              

            if( !cat.loading && 
                ($window.scrollTop() + $window.height()) > 
                (contentDiv.scrollTop() + contentDiv.outerHeight() + content_offset.top)
            ) {
                cat.loading = true;
                cat.catPage++;

                load_post(cat);
            }
        }
    }

    initializeCats();
    $window.scroll(onWindowScroll);     

});

PHP ファイルはほとんど同じで、次のecho $numPosts行をコメントアウトするだけです。

$numPosts = (isset($_GET['numPosts']))   ? $_GET['numPosts']   : 0;
$page     = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;
$cat      = (isset($_GET['cat']))        ? $_GET['cat']        : 0;

// echo $numPosts;
echo $page;

query_posts(array(
       'posts_per_page' => $numPosts,
       'paged'          => $page,
       'cat'            => $cat
));

これは私が急いで作ったものです。私はそれをテストしていません。試してみて、構文エラーに気をつけて、指を交差させてください:)。これがうまくいくことを願っています。うまくいかない場合は、うまくいくように修正することを検討できます。

于 2013-03-05T07:27:39.627 に答える