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 教程之后，老实说 AJAX 与 WordPress 仍然让我感到困惑 :( 我坚持使用以下确实有效的代码。

但是，我只想将其他帖子添加到现有循环中，而不是重复相同的帖子。

因此，换句话说，初始页面加载下面的循环，然后当我单击“.load-more”按钮时，它应该通过 AJAX 加载更多帖子，但会被已经显示的现有帖子抵消。

这怎么可能？

FUNCTIONS.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(){
    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 回传到服务器
• 服务器收到请求
• 您检查 nonce 以确保它是有效的请求
• 然后你做一些处理
• 将退货打包发送回请求
• 您的脚本收到响应并继续。

在您的情况下，您使用$.post 回叫服务器。 WordPress 收到请求，然后触发 2 个事件：

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

第一个事件在用户登录时触发并授予访问权限。第二个事件（即 nopriv）无论是否登录都会触发。

WordPress 然后运行您注册到上述事件名称的回调。您的示例回调是blog_post_data_fetch()。

现在在您的代码中，您需要添加nonce check 以确保其安全。如果通过，那么您可以处理请求。如果您要返回一个字符串，则可以将其回显（或仅调用视图/模板文件）。如果它是一个数组，那么您需要对其进行序列化，例如json_encode.

PHP 在执行 die() 或 wp_die() 构造时完成。

现在响应被发送回 jQuery。 $.post 收到响应。现在你可以用它做点什么了。

在您的情况下，您发送回一些 HTML 标记。您需要决定将此标记添加到网页的哪个位置。

AJAX 教程

有很多关于 WordPress 实现 AJAX 的教程可供您使用：

• Ajax in Plugins 来自 Codex
• Process Ajax Request Pippins
• Improved Ajax Techniques Tom McFarlin

完成代码

我给了你 PHP 端的代码（减去 nonce 安全检查）。接下来，您需要将以下内容添加到 jQuery 脚本中：

• 发送安全检查（nonce）
• 通过将响应添加到您想要的网页中来处理响应如果您得到一个字符串返回

另外，通过将 AJAX URL（可能还有 nonce）从 WordPress 发送到您的脚本，确保您是 localizing the parameters。