PHP+jQuery+Ajax+Mysql实现投票功能用于文章CMS系统

PHP+jQuery+Ajax+Mysql实现投票功能用于文章CMS系统

PHP+jQuery+Ajax+Mysql实现投票功能用于文章CMS系统

实现投票的基本流程:通过ajax获取心情图标及柱状图相关数据,当用户点击其中的一个心情图标时,向Ajax.php发送请求,PHP验证用户cookie防止重复提交,然后将mysql中对应的数据心情字段内容加1,成功后返回前端页面,并更新柱状图

源码介绍

HTML

首先我们放置一个#msg,用来显示操作结果信息,#mood是心情区域,其中ul通过jQuery异步加载心情图标、说明、柱状图以及统计信息。

 id="msg">
  
     id=mood>  
    >  

               

PHP

首先我们在config.php中添加心情相关参数。

//心情说明,用半角逗号隔开  
$moodname='震惊,不解,愤怒,杯具,无聊,高兴,支持,超赞';  
//心情图标文件,用半角逗号隔开(template/images/目录)  
$moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif';  
//统计心情柱图标最大高度  
$moodpicheight=80;

               

接下来,我们在ajax.php中准备分两部分,通过接收action参数,分为第一部分:发表心情,第二部分:获取心情相关信息。

include_once("config.php");  
  
$action = isset($_GET['action']) ? $_GET['action'] : ""
if($action=='send'){ //发表心情  
    ...  
}else//获取心情  
    ...  
}

               

一、发表心情:

用户从前端通过post提交发表心情的参数,包括文章id,心情id。先验证文章是否存在,然后再验证用户是否已经对这篇文章发表过心情了,接着操作数据库,将对应的心情字段值+1,并计算出当前心情对应的柱状图的高度,返回给前端js接收。

$id = (int)$_POST['id']; //文章或帖子id  
$mid = (int)$_POST['moodid']; //心情id(配置文件中提供8种心情)  
if(!$mid || !$id){  
    echo "此链接不存在";exit;  
}  
  
$havemood = chk_mood($id); //验证cookie  
if($havemood==1){  
    echo "您已经表达过心情了,保持平常心有益身心健康!";exit;  
}  
$field = 'mood'.$mid//数据表中的心情字段,分别用mood0,mood1,mood2...表示不同的心情字段  
$query = mysql_query("update mood set ".$field."=".$field."+1 where id=".$id); //对应的心情字段值+1  
if($query){  
    setcookie("mood".$id$mid.$id, time()+300); //设置cookie,为了测试我们设置cookie过期时间为300s  
    $query2 = mysql_query("select * from mood where id=$id");  
    $rs = mysql_fetch_array($query2);//获取该文章的心情数据  
    $total = $rs['mood0']+$rs['mood1']+$rs['mood2']+$rs['mood3']+$rs['mood4']+$rs['mood5']+  
$rs['mood6']+$rs['mood7'];  
    $height = round(($rs[$field]/$total)*$moodpicheight); //得到总量,并计算当前对应心情的柱状图的高度  
    echo $height//返回当前心情柱状的高度  
}else{  
    echo -1//数据出错  
}

               

验证用户是否已发表过心情,我们通过函数chk_mood()来判断用户对应的cookie是否存在。

//验证是否提交过  
function chk_mood($id){  
    $cookie = $_COOKIE['mood'.$id];  
    if($cookie){  
        $doit = 1;  
    }else{  
        $doit = 0;  
    }  
    return $doit;  
}

               

二、获取心情

通过获取数据表中文章或帖子id对应的心情数据,得到每种心情对应的值(可以理解为发表心情的次数),并计算其柱状图高度,将每种心情对应的值、名称、图标、高度信息构造成数组,最终以JSON格式数据返回给前端。

$mname = explode(',',$moodname);//心情说明  
$num = count($mname);  
$mpic = explode(',',$moodpic);//心情图标  
  
$id = (int)$_GET['id']; //文章或帖子id  
$query = mysql_query("select * from mood where id=$id"); //查询对应的心情数据  
$rs = mysql_fetch_array($query);  
if($rs){  
    //得到发表心情的总量  
    $total = $rs['mood0']+$rs['mood1']+$rs['mood2']+$rs['mood3']+$rs['mood4']+  
$rs['mood5']+$rs['mood6']+$rs['mood7'];  
    for($i=0;$i<$num;$i++){  
        $field = 'mood'.$i//字段名  
        $m_val = intval($rs[$field]); //心情对应的值(次数)  
        $height = 0//柱图高度  
        if($total && $m_val){  
            $height=round(($m_val/$total)*$moodpicheight); //计算高度  
        }  
              
        $arr[] = array(  
            'mid' => $i//对应心情id  
            'mood_name' => $mname[$i], //心情名称  
            'mood_pic' => $mpic[$i], //图标  
            'mood_val' => $m_val//次数  
            'height' => $height //柱状图高度  
        );  
    }  
    echo json_encode($arr); //返回JSON数据  
}


分享到 :

发表评论

登录... 后才能评论