Question

更新3 请看下面的答案！如果需要，可以根据要求提供进一步的解释

更新2

JS

 $archiveLayout.on('click',loadMoreButtonID,function(){


        let pageCount = $(this).attr('data-page'),
            nextPage  = parseInt( $(this).attr('data-page') ) + 1;



    let getParams;

    _.each($loadMoreButton, function(item) {
        let thisData = window.$(item).data()
        getParams = thisData;
    });

        console.log(getParams);

    $.post(ajaxurl, getParams,function(response){
            // var json_obj = JSON.parse(res);  
            console.log(response);
            console.log(response.data);


        }).done(function(){

            $('#load-more').attr('data-page', nextPage);
        });

});

php函数

add_action('wp_ajax_more_all_posts', __NAMESPACE__ . '\\ajax_more_all_posts');
add_action('wp_ajax_nopriv_more_all_posts', __NAMESPACE__ . '\\ajax_more_all_posts');
function ajax_more_all_posts()
{ 

    $response = array(
       'data' => Timber::compile(array('templates/blocks/content.twig'), $context)
    );
    wp_send_json($response);


}

重新启动HTML，但它只有1个帖子，并且数据没有填充树枝标记。

旧****

所以在我的博客页面上，我想加载更多帖子，我想知道我是否可以将响应数据附加到页面上的帖子数组中。或者如果需要以某种方式构建它以允许它。

任何提示/帮助等都将非常感谢。

以下代码示例

我在twig文件中设置了以下内容：

{% for post in posts %}
            {% set postCount = loop.index %}    


            {% set postImage = TimberImage(post.get_field('preview_image_post'))|resize('medium_large') %}

            {% include "blocks/content.twig" with {post: post}  %}  

        {% endfor %}

将帖子输出到页面上就好了。

然后我做了一个ajax请求，执行以下操作：

window.axios.get(fancySquaresRestUrl + 'wp/v2/posts', {
            params: getParams
        })
        .then(function (response) {




          // append the entire repsonese? wasn't working, could be doing it wrong

            _.each( response.data, function( post, index ) {

                  //append each object on its own maybe???
            });




        })
        .catch(function (error) {
            console.log(error);
        });

Answer 1

完整的答案如下:(这不会向Timber / Post对象附加任何内容，这是从传递给twig文件的数据中附加HTML）

您对以下代码有任何问题或意见，请随时提出。

使用的js：

$archiveLayout.on('click',loadMoreButtonID,function(){


    var $this = $(this);

    var pageCount = $(this).attr('data-pageCount');
    var nextPage = parseInt($(this).attr('data-page')) + 1;

    var getParams = void 0;

    _.each($loadMoreButton, function (item) {
        var thisData = window.$(item).data();
        getParams = thisData;
    });
    getParams.pagecount = pageCount;
    // console.log(getParams);

    $loader.fadeIn();
    $loadMoreButton.fadeOut();
    $.post(ajaxurl, getParams, function (response) {
        // var json_obj = JSON.parse(res);  
        // console.log(response);
        //console.log(response.data);


        if(response === 'nomore'){
            $loadMoreButton.fadeOut();
        } else {
            for(var hp = 0; hp < response.length; hp++){
                $('[data-js="append-content"]').append(response[hp].data);
                $this.attr('data-pageCount', Number(pageCount)+1);
            }

            $loadMoreButton.fadeIn();
        }


    }).done(function () {
        $loader.fadeOut();
        // $('#load-more').attr('data-page', nextPage);
    });

});

被调用的函数：

add_action('wp_ajax_more_all_posts', __NAMESPACE__ . '\\ajax_more_all_posts');
add_action('wp_ajax_nopriv_more_all_posts', __NAMESPACE__ . '\\ajax_more_all_posts');
function ajax_more_all_posts()
{ 

$cat_id = $_REQUEST[ 'cat' ] or $_GET[ 'cat' ];
$paged = $_REQUEST['pagecount'];
$cat = $_REQUEST['dataCat'];



$args = [
    'cat' => $cat_id,
    'posts_per_page' => 9,
    'post_status' => 'publish'
];

if($paged != ""){
    $args['paged'] = $paged; 
}

$posts = Timber::get_posts($args);
$message = [];
if($posts){
    foreach($posts as $post){
        $response = array(
            'data' => Timber::compile('templates/blocks/content.twig', ['post' => $post])
        );
        $message[] = $response;
    }
} else {
    $message = "nomore";
}
wp_reset_query();
wp_reset_postdata();

wp_send_json($message);
die();
}

Answer 2

我已经做了一些接近的事情。我的解决方案是在ajax上渲染并发送html。

所以我的Ajax调用一个php，在php上我这样做：

对于此示例，我的ajax调用get_php_logic操作。在php动作中，我做我的逻辑来渲染树枝，在最后我作为Json响应返回。

$response = array(
   'data' => Timber::compile(array('template.twig'), $context)
);
wp_send_json($response);

所以这样我的response.data就会准备好追加或替换。

Timber - WordPress，在ajax调用后将数据（json）附加到Timber \ Post对象

2 个答案: