WordPress，我如何AJAX附加帖子 [英] WordPress, How Do I AJAX Additional Posts
问题描述
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仍然使我感到困惑:(我坚持下面的代码行之有效.
After reading several AJAX tutorials and honestly AJAX with WordPress still confuses me :( I'm stuck with the following code which does work.
但是，我只想将其他帖子添加到现有循环中，而不要重复相同的帖子.
However, I would just like it to add additional posts to an existing loop and not repeat the same posts.
换句话说，最初，页面加载下面的循环，然后当我单击".load-more"按钮时，它应该通过AJAX加载更多的帖子，但被已经显示的现有帖子抵消了.
So in other words, the initial the page loads the loop below and then when I click on the ".load-more" button it should load more posts via AJAX but offset it by the existing posts already being displayed.
这怎么可能?
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();
});
推荐答案
您需要在PHP回调的末尾添加wp_die()或die(). PHP需要知道它已完成处理.此外，nopriv事件也不正确.
You need to add wp_die() or die() to the end of your PHP callback. PHP needs to know that it's done processing. Also, the nopriv event is not correct.
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
让我解释发生了什么事.
Explaining AJAX and WordPress
Let me explain what's happening.
服务器已处理业务逻辑，构建了HTML标记和资产，然后将它们发送到浏览器.现在服务器已完成.
The server has processed the business logic, built the HTML markup and assets, and then sent them out to the browser. The server is now done.
AJAX使您可以回调服务器，并为您执行更多处理.周期是:
AJAX gives you the means to call back to the server and have it do more processing for you. The cycle is:
- AJAX回发到服务器
- 服务器收到请求
- 您检查随机数以确保它是有效请求
- 然后您进行一些处理
- 打包退货并将其发送回请求
- 您的脚本收到响应并继续.
在您的情况下，您可以使用$.post回拨到服务器. WordPress收到请求，然后触发2个事件:
In your case, you make the call back to the server with $.post. WordPress receives the request and then fires 2 events:
-
wp_ajax_{your ajax action} -
wp_ajax_nopriv_{your ajax action}
wp_ajax_{your ajax action}wp_ajax_nopriv_{your ajax action}
如果用户已登录，则第一个事件将触发并提供访问权限.无论是否登录，第二个事件(即nopriv)都会触发.
The first event fires and gives access if the user is logged in. The second one (i.e. nopriv) fires regardless if they are logged in or not.
然后WordPress运行您注册到上述事件名称的回调.您的示例回调为blog_post_data_fetch().
WordPress then runs your callback that you registered to the above event names. Your example callback is blog_post_data_fetch().
现在，在代码中，您需要添加立即检查，以确保其安全.如果通过了，那么您可以处理请求.如果返回字符串，则可以将其回显(或仅调用视图/模板文件).如果是数组，则需要对其进行序列化，例如 json_encode .
Now in your code, you need to add nonce check to keep it safe. If that passes, then you can process the request. If you are returning a string, you can echo that out (or just call the view/template file). If it's an array, then you need to serialize it, e.g. json_encode.
PHP执行die()或wp_die()构造时完成.
PHP is done when it executes the die() or wp_die() construct.
现在，响应被发送回jQuery. $.post收到响应.现在您可以使用它来做一些事情了.
Now the response is sent back to jQuery. $.post receives the response. Now you can do something with it.
以您为例，您发回了一些HTML标记.您将要决定将此标记添加到网页中的位置.
In your case, your sending back some HTML markup. You'll want to decide where to add this markup into the web page.
关于WordPress的AJAX实现，有很多教程可供您使用:
There are a lot of tutorials available to you on WordPress' implementation of AJAX:
- Ajax in Plugins by Codex
- Process Ajax Request by Pippins
- Improved Ajax Techniques by Tom McFarlin
我为您提供了PHP方面的代码(减去了nonce安全检查).接下来，您需要将以下内容添加到jQuery脚本中:
I gave you the code for the PHP side (minus the nonce security check). Next, you'll need to add the following into the jQuery script:
- 发送安全检查(一次)
- 通过将响应添加到您想要的网页中来处理响应.如果，您会返回一个字符串
还要通过发送AJAX网址来确保您对参数进行本地化从WordPress到您的脚本.
Also make sure that you are localizing the parameters by sending the AJAX URL (and maybe nonce) from WordPress to your script.
这篇关于WordPress，我如何AJAX附加帖子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
