如何通过AJAX获取帖子标题循环?

时间:2011-02-13 作者:Sahas Katta

我有一个最近的帖子标题列表sidebar.php. 下面是该代码的外观示例:

<?php $args = array(\'posts_per_page\' => 20); ?>
<?php $sidebar = new WP_Query($args); ?>
<?php if ( $sidebar->have_posts() ) : ?>
<?php while ( $sidebar->have_posts() ) : $sidebar->the_post(); ?>

<div class="story">
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
  <?php the_title(); ?> - <?php the_time("F j, Y h:i A"); ?>
</a>
</div>

<?php endwhile; ?>
<?php endif; ?>
那部分工作得很好。它显示了用永久链接包装的20个最新帖子标题和帖子时间。然而,我正在尝试做更多的事情。我想在底部创建一个加载更多按钮来获取接下来的20个帖子标题。我知道我的jQuery,这不是问题所在。

我需要帮助了解如何在新的自定义中创建自定义循环.php 仅生成上述html的模板文件。该文件需要能够接受页码的参数,以便javascript 每次都可以获取递增的URL。

如果有任何帮助,我将不胜感激,谢谢!

1 个回复
最合适的回答,由SO网友:Bainternet 整理而成

您可以像这样包装函数并将其挂接到ajax调用:

//if you want only logged in users to access this function use this hook
add_action(\'wp_ajax_more_links\', \'my_AJAX_more_links_function\');
//if you want none logged in users to access this function use this hook
add_action(\'wp_ajax_nopriv_more_links\', \'my_AJAX_more_links_function\');

function my_AJAX_more_links_function(){
    check_ajax_referer(\'more_links\');
    $success_response = new WP_Ajax_Response();
    $args = array(\'posts_per_page\' => 20 , \'offset\' => $_POST[\'offset\']);
    $sidebar = new WP_Query($args);
    if ( $sidebar->have_posts() ){ 
         while ( $sidebar->have_posts() ) {
            $sidebar->the_post(); 
            $out .= \'<div class="story">\';
            $out .= \'<a href="\' . the_permalink().\'" title="\'. the_title\'.">\' . the_title().\' - \'.the_time("F j, Y h:i A") .\'</a></div>\';
        }
        $success_response->add(array(
                    \'what\' => \'has\',
                    \'data\' => array(\'html\' => $out, \'offset\' => $_POST[\'offset\']
        ));
    }else{
        $out = __(\'Sorry but No more!\');
        $success_response->add(array(
                    \'what\' => \'none\',
                    \'data\' => $out
                ));
    }

    $success_response->send();      
    exit;   
}
然后将其添加到末尾的边栏函数中

<span class="more_links"></span>
<span class="get_more">
    <input type="hidden" name="offset" id="offset" value="20">
    <input type="submit" name="more" id="more" value="Get more links">
</span>
<script type="text/javascript" >
jQuery(document).ready(function($) {
    jQuery(\'#more\').click(function() { 
        var data = {
            action: \'more_links\',
            offset: jQuery( \'#offset\' ).val(),
            _ajax_nonce: <?php echo wp_create_nonce( \'more_links\' ); ?>
        };

        // since 2.8 ajaxurl is always defined in the admin header and points to admin-ajax.php
        jQuery.post(ajaxurl, data, function(response) {
            var res = wpAjax.parseAjaxResponse(response, \'ajax-response\');
            jQuery.each( res.responses, function() { 
                if (this.what == \'has\') {
                    //insert links
                    jQuery(".more_links").append( this.data.html ); 
                    //update offset value
                    jQuery("#offset").val(this.data.offset);
                    jQuery(".more_links").fadeIn("fast");
                }else{
                    //no more links found
                    jQuery(".more_links").append( this.data.html );
                    jQuery(".get_more").remove();

                }
                //end if
                });//end each


        });

        return false;
    })
});
</script>
好了,等等,你需要添加wp-ajax响应

add_action(\'wp_head\',\'add_scripts_121\');
function add_scripts_121(){
    wp_enqueue_script(\'wp-ajax-response\');
}
你已经准备好了

结束