Question

JQUERY UPDATE

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();
}

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');
}

在阅读了几个AJAX教程之后，老实说，使用WordPress的AJAX仍然让我感到困惑:(我坚持使用以下代码才能正常工作。

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

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

这怎么可能呢？

的functions.php

<?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; ?>

BLOG POSTS TEMPLATE

 function fetchBlogPosts(){

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

          });
  }

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

JQUERY

NSLinkAttributeName

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
Process Ajax Request来自Pippins
Improved Ajax Techniques

完成代码

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

发送安全检查（nonce）
通过将响应添加到您希望的网页中来处理响应，如果您收到字符串

通过将WordPress的AJAX URL（也许是nonce）发送到您的脚本，确保您是localizing the parameters。

WordPress，我如何AJAX额外的帖子

1 个答案:

解释AJAX和WordPress

AJAX教程

完成代码