WordPress，我如何AJAX附加帖子

Question

JQUERY更新

<script type="text/javascript">

                    jQuery(function($){

                            function fetchBlogPosts(){

                                 $.post( ajaxUrl, {'action' : 'post_blog', 
                                                   'security' :'<?php echo wp_create_nonce('load_more_posts'); ?>' }, 
                                 function(response){

                                 });


                             }

                             $('.load-more').click(function(){
                                 fetchBlogPosts();
                             });

                        });

</script>

PHP功能更新

add_action('wp_ajax_post_blog', 'blog_post_data_fetch');
add_action('wp_ajax_nopriv_post_blog', 'blog_post_data_fetch');
function blog_post_data_fetch(){

    check_ajax_referer('load_more_posts', 'security');

    ob_clean();
    get_template_part( 'inc/blog','posts' );

    wp_die();
}

在閱讀了幾本AJAX教程之后，老實說，使用WordPress的AJAX仍然使我感到困惑:(我堅持下面的代碼可以正常工作。

但是，我只想將其他帖子添加到現有循環中，而不要重復相同的帖子。

因此，換句話說，頁面最初會加載下面的循環，然后當我單擊“ .load-more”按鈕時，它應該通過AJAX加載更多的帖子，但被已經顯示的現有帖子抵消了。

這怎么可能呢？

功能庫

add_action('wp_ajax_post_blog', 'blog_post_data_fetch');
add_action('wp_ajax_nopriv_post_blog', 'blog_post_data_fetch');
function blog_post_data_fetch(){
    get_template_part('inc/blog','posts');
}

博客帖子模板

<?php

    $the_query = new WP_Query( array(
        'post_type' => 'blog',
    ));

    if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();


?>


<div class="carousel-cell">
    <div class="blog-item">

        <div class="featured-image">
            <a href="<?php the_permalink(); ?>">

                <?php
                    if ( has_post_thumbnail() ) :
                        the_post_thumbnail('blog-thumb');
                    else :
                ?>
                    <img src="<?php bloginfo('template_url'); ?>/img/blog-thumb.jpg" alt="">

                <?php endif; ?>

            </a>
        </div><!--/featured-image-->

        <div class="post">

            <h1><a href="#"><?php the_title(); ?>hello</a></h1>

            <?php the_excerpt(); ?>

        </div><!--/post-->


    </div><!--/blog-item-->
</div><!--/carousel-cell-->

<?php endwhile; endif; ?>

JQUERY

 function fetchBlogPosts(){

          $.post( ajaxUrl, { 'action' : 'post_blog' }, function(response){

          });
  }

      $('.load-more').click(function(){
          fetchBlogPosts();
      });

Answer 1

您需要在PHP回調的末尾添加wp_die()或die() 。 PHP需要知道它已完成處理。 同樣，nopriv事件也不正確。

add_action('wp_ajax_post_blog', 'blog_post_data_fetch');
add_action('wp_ajax_nopriv_post_blog', 'blog_post_data_fetch');
/**
 * Processes the Ajax request for the action: post_blog.
 *
 * @since 1.0.0
 *
 * @return void
 */
function blog_post_data_fetch(){
    // You need to check the nonce here first!
    // Let's keep our web pages safe.

    // Then if the nonce is correct, you can do the
    // processing.
    ob_clean();
    get_template_part( 'inc/blog','posts' );

    // When you're done, make sure you exit PHP
    wp_die();
}

解釋AJAX和WordPress

讓我解釋一下發生了什么。

服務器已經處理了業務邏輯，構建了HTML標記和資產，然后將它們發送到瀏覽器。 現在服務器已完成。

AJAX使您可以回調服務器，並為您執行更多處理。 周期為：

• AJAX回發到服務器
• 服務器收到請求
• 您檢查隨機數以確保它是有效的請求
• 然后你做一些處理
• 打包退貨並將其發送回請求
• 您的腳本收到響應並繼續。

在您的情況下，您可以使用$.post回撥到服務器。 WordPress收到請求，然后觸發2個事件：

• wp_ajax_{your ajax action}
• wp_ajax_nopriv_{your ajax action}

如果用戶已登錄，則第一個事件將觸發並提供訪問權限。無論是否登錄，第二個事件（即nopriv）都會觸發。

然后，WordPress將運行您注冊到上述事件名稱的回調。 您的示例回調是blog_post_data_fetch() 。

現在，在代碼中，您需要添加隨機數檢查以確保其安全。 如果通過，則可以處理請求。 如果要返回字符串，則可以將其回顯（或僅調用視圖/模板文件）。 如果是數組，則需要對其進行序列化，例如json_encode 。

PHP在執行die()或wp_die()構造時完成。

現在，響應被發送回jQuery。 $.post收到響應。 現在您可以使用它來做一些事情。

您的情況是，您發回一些HTML標記。 您將要決定將此標記添加到網頁的位置。

AJAX教程

關於WordPress的AJAX實現，有很多教程可供您使用：

• Codex 插件中的Ajax
• 通過Pippins 處理Ajax請求
• Tom McFarlin 改進的Ajax技術

完成代碼

我為您提供了PHP方面的代碼（減去了nonce安全檢查）。 接下來，您需要將以下內容添加到jQuery腳本中：

• 發送安全檢查（一次）
• 通過將響應添加到想要的網頁中來處理響應（ 如果返回字符串）

另外，通過將WordPress的AJAX URL（可能是隨機數）發送到腳本中，確保您正在本地化參數 。