致力于打造一个优秀的建站资源共享学习平台!

爱站窝四川

wordpress进阶教程(三十一):ajax实现文章顶踩

爱站窝查看全部>>

人气337

本篇教程要实现的内容为定踩功能,或者说“喜欢”“不喜欢”。

应用实例:

wordpress进阶教程(三十一):ajax实现文章顶踩

实现步骤:

本实例以上图所示喜欢和不喜欢为例。

一、新建

新建,将投票数据保存在新的数据表中,我们需要记录用户ID,文章ID,投票内容,用户ip,新数据表如下:wordpress进阶教程(三十一):ajax实现文章顶踩

实现新建数据表代码如下,将代码添加进主题的functions.php(或自定)文件中:

  1. /*********更新重写规则***************/
  2. function ashu_load_theme() {
  3.     global $pagenow;
  4.     if ( is_admin() && 'themes.php' == $pagenow && isset( $_GET['activated'] ) )
  5.         ashu_vote_install(); //激活主题的时候执行函数
  6. }
  7. add_action( 'load-themes.php', 'ashu_load_theme' );
  8. function ashu_vote_install(){
  9.     global $wpdb;
  10.     //创建 _post_vote表
  11.     $table_name = $wpdb->prefix . 'post_vote';
  12.     if( $wpdb->get_var("SHOW TABLES LIKE '$table_name'") != $table_name ) :
  13.     $sql = " CREATE TABLE `".$wpdb->prefix."post_vote` (
  14.       `` BIGINT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  15.       `user` INT NOT NULL ,
  16.       `post` INT NOT NULL ,
  17.       `rating` varchar(10),
  18.       `ip` varchar(40)
  19.      ) ENGINE = MYISAM DEFAULT CHARSET=utf8;";
  20.         require_once(ABSPATH . 'wp-admin/includes/upgrade.php');
  21.         dbDelta($sql);
  22.     endif;
  23. }

二、准备投票和查询函数

准备数据库操作函数,包括添加数据函数和查询数据,将如下函数代码也添加到主题的functions.php文件(或自定):

1、添加数据函数

  1. /*
  2. *添加投票函数
  3. *$post_id 文章id
  4. *$user_id 用户ID
  5. *$ip 用户IP
  6. *$rating 投票内容
  7. */
  8. function add_vote($post_id,$user_id='',$ip='',$rating='up'){
  9.     global $wpdb;
  10.     $user_id = (int)$user_id;
  11.     $post_id = (int)$post_id;
  12.     if(($user_id=='')&&($ip=='')){
  13.         return "e"; //返回error
  14.     }
  15.     //检查用户对某一文章是否已经投票票了
  16.     if($user_id!=''){
  17.         $check= "select * from ".$wpdb->prefix."post_vote where post='$post_id' and user='$user_id'";
  18.     }else{
  19.         if($ip!=''){
  20.             $check= "select * from ".$wpdb->prefix."post_vote where post='$post_id' and ip='$ip'";
  21.         }
  22.     }
  23.     $coo = $wpdb->get_results($check);
  24.     //投票内容只能是up或者down
  25.     if($rating=='up'){
  26.         $rating='up';
  27.     }else{
  28.         $rating='down';
  29.     }
  30.     //如果不存在数据
  31.     if(!count($coo) > 0){
  32.         //插入数据 sql
  33.         $s = "insert into ".$wpdb->prefix."post_vote (user,post,rating,ip) values('$user_id','$post_id','$rating','$ip')";
  34.         $wpdb->query($s);
  35.         return "y"; //返回yes
  36.     }else{
  37.         return "h"; //返回have
  38.     }
  39.     return "e";//返回error
  40. }

2、查询投票数据函数

比如查询某文章点击up的数据,则使用 get_post_vote(1,'up');

  1. /*
  2. *获取文章投票数据
  3. *$post_id 文章ID
  4. *$vote 投票内容
  5. */
  6. function get_post_vote($post_id,$vote='up'){
  7.     global $wpdb;
  8.     $post_id = (int)$post_id;
  9.     if($vote == 'up'){
  10.         $vote='up';
  11.     }else{
  12.         $vote='down';
  13.     }
  14.     //查询数据sql
  15.     $sql = "select count(*) from ".$wpdb->prefix."post_vote where post='$post_id' and rating='$vote'";
  16.     $coo = $wpdb->get_var($sql);
  17.     if($coo)
  18.     return $coo; //返回数据
  19.     else
  20.     return 0;
  21. }

三、准备前台html和js

建立好了新的数据表,也准备好了实现投票功能的函数,接下来看前台的html和js。

1、网页前台显示数据,将下面的代码放在输出文章的循环内,即常说的loop中。

  1. <span class="vote_up" id="<?php echo 'vote_up'.$post->ID;?>">
  2.     <a href="javascript:void(0);" rel="<?php echo 'up_',$post->ID;?>">
  3.     <span id="<?php echo 'vup'.$post->ID;?>">
  4.         <?php echo get_post_vote($post->ID,'up');?>
  5.     </span>
  6.     </a>
  7. 人认为值得买!</span>
  8. <span class="vote_down" id="<?php echo 'vote_down'.$post->ID;?>">
  9.     <a href="javascript:void(0);" rel="<?php echo 'down_'.$post->ID;?>">
  10.     <span id="<?php echo 'vdown'.$post->ID;?>">
  11.         <?php echo get_post_vote($post->ID,'down');?>
  12.     </span>
  13.     </a>人认为不值得买!
  14. </span>

上面代码将会输出一个如下的html结构

  1. <span class="vote_up" id="vote_up44">
  2.     <a href="javascript:void(0);" title="值得" rel="up_44">
  3.     <span id="vup44">
  4.         0
  5.     </span>
  6.     </a>
  7. 人认为值得买!</span>
  8. <span class="vote_down" id="vote_down44">
  9.     <a href="javascript:void(0);" title="不值" rel="down_44">
  10.     <span id="vdown44">
  11.         1
  12.     </span>
  13.     </a>人认为不值得买!
  14. </span>

四、js代码
本篇教程中和上一篇一样,我们同样使用jquery发起ajax请求,所以首先在网页头部加载jquery代码,我在主题底部文件footer.php中加载jqeury。我将jquery-1.7.2.min.js放在了主题文件夹的js文件夹里面,所以用get_template_directory_uri()函数来输出主题的url

  1. <script src="<?php echo get_template_directory_uri();?>/js/jquery-1.7.2.min.js"></script>

然后我将发起ajax请求代码也放在了主题里面js文件夹中的ashu.js文件,所以再加上一个

其中输出了ajax请求的地址:www.ashuwp.com/wp-admin/admin-ajax.php
  1. <script type="text/javascript">var ajax_url = '<?php echo admin_url(); ?>admin-ajax.php';</script>
  2. <script src="<?php echo get_template_directory_uri();?>/js/ashu.js"></script>

ashu.js文件中的代码

  1. /**
  2.  * by ashu.
  3.  * URI: http://www.ashuwp.com
  4.  */
  5. /**
  6.  * 获取Cookie
  7.  *name  cookie名称
  8.  */
  9. function getCookie(name) {
  10.     var start = document.cookie.indexOf( name + "=" );
  11.     var len = start + name.length + 1;
  12.     if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) )
  13.         return null;
  14.     if ( start == -1 )
  15.         return null;
  16.     var end = document.cookie.indexOf( ';', len );
  17.     if ( end == -1 )
  18.         end = document.cookie.length;
  19.     return unescape( document.cookie.substring( len, end ) );
  20. }
  21. function ashu_isCookieEnable() {
  22.     var today = new Date();
  23.     today.setTime( today.getTime() );
  24.     var expires_date = new Date( today.getTime() + (1000 * 60) );
  25.     document.cookie = 'ashu_cookie_test=test;expires=' + expires_date.toGMTString() + ';path=/';
  26.     var cookieEnable = (getCookie('ashu_cookie_test') == 'test') ?  true : false;
  27.     //document.cookie = 'ludou_cookie_test=;expires=Fri, 3 Aug 2001 20:47:11 UTC;path=/';
  28.     return cookieEnable;
  29. }
  30. jQuery(document).ready(function($) {
  31.     var ashu_token = 1;
  32.     $('.vote_up a').click(function(){
  33.         //检查浏览器是否启用cookie功能
  34.         if( !ashu_isCookieEnable() ) {
  35.             alert("很抱歉,您不能给本文投票!");
  36.             return;
  37.         }
  38.         if( ashu_token != 1 ) {
  39.             alert("您的鼠标点得也太快了吧?!");
  40.             return false;
  41.         }
  42.         ashu_token = 0;
  43.         //获取投票a标签中的rel值
  44.         var full_info = $(this).attr( 'rel' );
  45.         var arr_param = full_info.split( '_' ); //以字符"_"分割
  46.         //发起ajax
  47.         $.ajax({
  48.             url:ajax_url, //ajax地址
  49.             type:'POST',
  50.             //请求的参数包括action   rating  postid三项
  51.             data:'action=vote_post&rating=' + arr_param[ 0 ] + '&postid=' + arr_param[ 1 ],
  52.             //返回数据
  53.             success:function(results){
  54.                 if(results=='n'){
  55.                     alert('评价失败');
  56.                     ashu_token = 1;
  57.                 }
  58.                 if (results=='y'){
  59.                     //如果成功,给前台数据加1
  60.                     var upd_vd = 'vup' + arr_param[ 1 ];
  61.                     $('#'+upd_vd).text(parseInt($("#"+upd_vd).text())+1);
  62.                     ashu_token = 1;
  63.                 }
  64.                 if (results=='h'){
  65.                     ashu_token = 1;
  66.                     alert('已经发表过评价了');
  67.                 }
  68.                 if (results=='e'){
  69.                     ashu_token = 1;
  70.                     alert('评价失败');
  71.                 }
  72.             }
  73.         });
  74.     });
  75.     $('.vote_down a').click(function(){
  76.         if( !ashu_isCookieEnable() ) {
  77.             alert("很抱歉,您不能给本文投票!");
  78.             return;
  79.         }
  80.         if(ashu_token != 1) {
  81.             alert("您的鼠标点得也太快了吧?!");
  82.             return false;
  83.         }
  84.         ashu_token = 0;
  85.         var full_info = $(this).attr( 'rel' );
  86.         var arr_param = full_info.split( '_' );
  87.         $.ajax({
  88.             url:ajax_url,
  89.             type:'POST',
  90.             data:'action=vote_post&rating=' + arr_param[ 0 ] + '&postid=' + arr_param[ 1 ],
  91.             success:function(results){
  92.                 if(results=='n'){
  93.                     alert('评价失败');
  94.                     ashu_token = 1;
  95.                 }
  96.                 if (results=='y'){
  97.                     var upd_vd = 'vdown' + arr_param[ 1 ];
  98.                     $("#"+upd_vd).text(parseInt($("#"+upd_vd).text())+1);
  99.                     ashu_token = 1;
  100.                 }
  101.                 if (results=='h'){
  102.                     ashu_token = 1;
  103.                     alert('已经发表过评价了');
  104.                 }
  105.                 if (results=='e'){
  106.                     ashu_token = 1;
  107.                     alert('发生未知错误');
  108.                 }
  109.             }
  110.         });
  111.     });
  112. });

五、后台php处理代码。

在前面的教程中,我们的ajax请求地址直接是网站页码地址,但是本篇教程中,我们的ajax请求地址是类似:www.ashuwp.com/wp-admin/admin-ajax.php

使用这个地址来处理ajax请求,请一定记得请求中需要有action参数,然后我们只需要在functions.php文件(或自定)中添加下马代码,即可处理我们的请求,注意执行完请求输出内容之后,添加die函数结束:

  1. /*
  2. *wp的ajax都可以通过请求中的action参数来执行对应的钩子
  3. *示例中我们的action参数值是vote_post
  4. *所以我们可以直接用下面两个钩子来执行动作
  5. */
  6. add_action("wp_ajax_vote_post", "add_votes_options");
  7. add_action("wp_ajax_nopriv_vote_post", "add_votes_options");
  8. function add_votes_options() {
  9. if( isset($_POST['action']) && ($_POST['action'] == 'vote_post') ){
  10.     $postid = (int)$_POST['postid'];
  11.     if( !$postid ){
  12.         echo 'e'; //输出error
  13.         die(0);
  14.     }
  15.     //cookie中是否已经存在投票数据
  16.     $voted = $_COOKIE["smzdm_voted_".$postid];
  17.     if( $voted ){
  18.         echo 'h'; //输出have
  19.         die(0);
  20.     }
  21.     $ip = $_SERVER['REMOTE_ADDR'];//ip
  22.     $rating = $_POST['rating']; //投票内容
  23.     //判断用户是否登录
  24.     if(  is_user_logged_in() ){
  25.         global $wpdb, $current_user;
  26.         get_currentuserinfo();
  27.         $uid = $current_user->ID;
  28.     }else{
  29.         $uid='';
  30.     }
  31.     if($rating=='up'){
  32.         $rating='up';
  33.     }else{
  34.         $rating='down';
  35.     }
  36.     //添加数据
  37.     $voted = add_vote($postid,$uid,$ip,$rating);
  38.     if($voted=='y'){
  39.         //设置cookie
  40.         setcookie("ashu_voted_" . $postid,$rating, time() + 3000000, '/');
  41.         echo 'y';//输出yes
  42.         die(0);
  43.     }
  44.     if($voted=='h'){
  45.         //设置cookie
  46.         setcookie("ashu_voted_" . $postid,$rating, time() + 3000000, '/');
  47.         echo 'h';
  48.         die(0);
  49.     }
  50.     if($voted=='e'){
  51.         echo 'n';//输出no
  52.         die(0);
  53.     }
  54. }else{
  55.     echo 'e';//输出eroor
  56. }
  57. die(0);
  58. }

六、结束
本票教程并非实现定踩或喜欢功能的最佳选择,只是提供一个ajax的简单示例...

TA的作品
  • Mohtml 作品/设计展示自适应wordpress主题 模板兔出品
  • QYKCMS后台软件v4.1.3部分操作界面截图
  • 轻松制作一款与众不同的QYKCMS网站主题
  • 怎样设置可以让QYKCMS系统运行得更快?
  • 使用 Apache .htaccess 文件设置QYKCMS伪静态规则的方法
  • QYKCMS后台管理软件入门级操作视频教程
  • IIS下使用 web.config 文件设置QYKCMS伪静态规则的方法
  • 同一个网站空间使用QYKCMS建立多个独立站点
  • QYKCMS后台管理员密码忘记了怎么办
  • QYKCMS 网站系统4.0 标签大全
查看全部

全部评论: 0

在线咨询
有什么可以帮到你
点击咨询

账号登录

忘记密码

第三方账号快速登录

Q Q 登 录 微 博 登 录

账号注册 已经有账号? 立即登录

发送验证码

第三方账号快速注册

Q Q 登 录 微 博 登 录