Ajax loop refresh on click

时间：2010-12-10 作者：Carpy

我在页面上显示一个随机的post循环。我想放一个“刷新”链接，通过ajax刷新循环的内容。

这可能吗？

这是我的循环，如果有帮助：

            <ul id="content-inner" class="thumb-grid clearfix">
            <?php query_posts(\'posts_per_page=20&orderby=rand\'); ?>
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
                <li>
                    <a href="<?php the_permalink(); ?>">
                        <img src="<?php echo $my_image_url = get(\'thumbnail\'); ?>" alt="" />
                        <span class="title"><?php the_title(); ?></span>
                        <span class="feat"><?php $articletags = strip_tags(get_the_tag_list(\'\',\', \',\'\'));echo $articletags;?></span>
                    </a>
                </li>
            <?php endwhile;?>
            <?php endif; ?>
            <?php wp_reset_query(); ?>
            </ul>

2 个回复

最合适的回答,由SO网友:John P Bloch 整理而成

不应该太棘手。首先：创建一个javascript文件并添加以下内容：

jQuery(document).ready(function($){
  $(\'#refresh-links-id\').click(function(e){
    e.preventDefault();
    $.post(ajaxurl,{action:\'jpb_random_loop\'}, function(data){
      $(\'#content-inner\').fadeOut(250).empty().append( data ).fadeIn(250);
    });
  });
});

将该文件保存在主题目录中的某个位置（也可以在子目录中）。要使其工作，刷新链接不应位于内部ul#content-inner. 不过，jQuery的post调用非常基本。

接下来，将此添加到主题functions.php 文件：

function jpb_template_redirect(){
  if( <conditions under which this javascript should execute> ){
    wp_enqueue_script( \'random-loop\', \'<url to the javascript file above>\', array( \'jquery\' ), \'1.0\' );
  }
}

function jpb_random_loop_cb(){
  query_posts(\'posts_per_page=20&orderby=rand\');
  if (have_posts()) : while (have_posts()) : the_post(); ?>
    <li>
      <a href="<?php the_permalink(); ?>">
      <img src="<?php echo $my_image_url = get(\'thumbnail\'); ?>" alt="" />
      <span class="title"><?php the_title(); ?></span>
      <span class="feat"><?php $articletags = strip_tags(get_the_tag_list(\'\',\', \',\'\'));echo $articletags;?></span>
      </a>
    </li>
  <?php endwhile; endif;
  die();
}

add_action( \'template_redirect\', \'jpb_template_redirect\' );
add_action( \'wp_ajax_jpb_random_loop\', \'jpb_random_loop_cb\' );
add_action( \'wp_ajax_nopriv_jpb_random_loop\', \'jpb_random_loop_cb\' );

这将把一切联系在一起。只需确保template_redirect 函数，以便javascript包含在正确的页面中。

SO网友:PNMG

这个插件似乎可以满足您的需要。

http://wordpress.org/extend/plugins/wp-ajax-random-posts/

如果你不想使用这个插件，你可以随时查看刷新链接的代码，并尝试让它为你工作。

结束

标签： loop ajax 小码农

如何在不编写插件的情况下将AJAX引入主题？

好的，我从wordpress主题中的一些AJAX内容开始1）我正在根据主题框架构建一个儿童主题2）我的儿童主题有一个标题。php，索引。php，函数。php和样式。css（现阶段）在我的标题中。php我有以下内容（顺便说一句：代码改编自http://codex.wordpress.org/AJAX_in_Plugins):<?php if( !is_admin() ) { add_action(\'wp_ajax_my_special_action\', \'my_act

小码农CODE

Ajax loop refresh on click

相关推荐

如何在不编写插件的情况下将AJAX引入主题？