wordpress中AJAX隨機取一條記錄的例子

點擊“換一個”隨機換一條內容。

由於有“標準”“映像”“視頻”等文章形式，這裡換一個需要隨機擷取一篇文章形式是映像的文章，並且把圖片，和連結取出，使用ajax替換內容。

①我們可以建立一個新頁面模板，模板名字就叫做recommend

建立頁面模板：

<?php
/*
 * Template Name:換一條
 */
然後在後台管理建立一個頁面，選擇這個模板，取名recommend，這樣就建了一個新頁面

②在模板中取得並輸出需要替換的內容

代碼如下	複製代碼
<?php /*  * Template Name:換一條  */ www.111cn.net $args = array(   'tax_query' => array(     array(       'showposts' => '1',       'taxonomy' => 'post_format',       'field' => 'slug',       'terms' => 'post-format-image',     )   ),   'orderby'=>'rand', ); query_posts($args); the_post(); ?>

這是隨機找出一篇文章形式為映像的文章。

代碼如下	複製代碼
<a href="<?php the_permalink(); ?>" target="_self">  <?php $imgurl= catch_that_image();?>  <img src="<?php echo $imgurl;?>" alt="叫人起床的N種奇葩方式" width="270" height="152" />  <span><?php the_title(); ?></span> </a>

這裡就是需要顯示的html，我們把連結和圖片地址都替換了。

catch_that_image函數：

代碼如下	複製代碼
<?php function catch_that_image() {  global $post, $posts;  $first_img = '';  ob_start();  ob_end_clean();  $output = preg_match_all('/<img.+src=['"]([^'"]+)['"].*>/i', $post->post_content, $matches);  $first_img = $matches [1] [0];    // no image found display default image instead  if(empty($first_img)){   $first_img = "/images/default.jpg";  }  return $first_img; } ?>

這個函數可以取出改篇文章的第一篇圖片。

③在前端頁面寫上ajax函數

代碼如下

複製代碼

<script>     $(function(){       $(".featured-random").load("/recomend/");     });    function recommend(){   $(".featured-random").load("/recomend/");   return false;  }     </script>       <div class="featured sidebox radiusbox">         <h3 class="side-title">推薦內容</h3>         <div class="featured-random">           </div>         <a class="refresh-random" href="javascript:void(0)" onclick="recommend()">換一個</a>     </div>

這樣，這個“換一個”ajax效果就做好了。