素材牛VIP会员

PHP+jQuery+Ajax+Mysql完成文章阅后心境立场投票功能

 所属分类:MG双倍剂量,PHP/MySql-Ajax,UI后果/构造

 浏览:17378次-  下载:24次-  评论:8次-  发布时间:2016-07-29
PHP+jQuery+Ajax+Mysql完成文章阅后心境立场投票功能
积分辩明:注册即送15牛币,逐日签到可取得5牛币,成为VIP会员可永久免积分下载!   充值积分   充值会员   更多解释»
素材描述:很多大年夜站外面都有发表心境的功能,经过过程这个功能可以直不雅统计分析文章或帖子的浏览者的心境感触感染数据,也很成心思。明天我们来分析一下文章心境投票功能的道理

详细简介

本素材完成投票的流程:经过过程ajax获得心境图标及柱状图相干数据,当用户点击个中的一个心境图标时,向PHP后端Ajax.php发送请求,然后将mysql中对应的数据心境字段内容加1,成功后前往前端页面,并更新柱状图和统计数据。

1、HTML部分:

<div id="msg">div> 
    <div id=mood> 
    <ul>ul> 
div>

#msg为操作提示区域
#mood为投票操作区域
ul为投票数据加载区域

2、PHP部分:

config.php为数据库、投票图片文字设备文件

$host="localhost"; 
$db_user="root"; //数据库用户名
$db_pass="";  //数据库用户暗码
$db_name="scn_demo"; //数据库称号
 
$link=mysql_connect($host,$db_user,$db_pass); 
mysql_select_db($db_name,$link); 
mysql_query("SET names UTF8"); 
 
//心境解释,用半角逗号隔开 
$moodname='震动,不解,末路怒,杯具,无聊,高兴,支撑,超赞'; 
//心境图标文件,用半角逗号隔开(template/images/目次) 
$moodpic='a1.gif,a2.gif,a3.gif,a4.gif,a5.gif,a6.gif,a7.gif,a8.gif'; 
//统计心境柱图标最大年夜高度 
$moodpicheight=80; 

mood.php分两部分。第一部分:发表心境,第二部分:获得心境相干信息。
PS:文件内有注释,可自行下载检查

3、jQuery部分:

向mood.php发送Ajax请求,获得心境列表信息,并展示在index.html页面中。

$(function(){ 
    $.ajax({ 
        type: 'GET', //经过过程get方法发送请求 
        url: 'mood.php', //目标地址 
        cache: false, //不缓存数据,留意文明发表心境的数据是及时的,需将cache设置为false,默许是true 
        data: 'id=1', //参数,对应文章或帖子的id,本例中固定为1,实际应用中是获得以后文章或帖子的id 
        dataType: 'json', //数据类型为json 
        error: function(){ 
            alert('掉足了!'); 
        }, 
        success: function(json){ //请求成功后 
            if(json){ 
                $.each(json,function(index,array){ //遍历json数据列 
                    var str = "
  • "+array['mood_val']+"
    +array['height']+"px;\">
    +array['mid']+"\">+array['mood_pic']+"\">
    "
    +array['mood_name']+"
  • "
    ; $("#mood ul").append(str); //将数据参加到#mood ul列表中 }); } } }); ... });

    我们在拜访index.html后,页面会载入心境列表,固然要想看到终究分列后果。

    接上去,我们有个交互举措,当点击对应的心境图标时,图标被标识为已发表,柱状图高度产生变更,并且下面的数字会+1,表示发表成功,假设持续点击心境图标,会提示曾经发表过不克不及反复提交。请看代码:

    $(".face").live('click',function(){ //侦听点击事宜 
        var face = $(this); 
        var mid = face.attr("rel"); //对应的心境id 
        var value = face.parent().find("span").html(); 
        var val = parseInt(value)+1; //数字加1 
        //提交post请求 
        $.post("mood.php?action=send",{moodid:mid,id:1},function(data){ 
            if(data>0){ 
                face.prev().css("height",data+"px"); 
                face.parent().find("span").html(val); 
                face.find("img").addClass("selected"); 
                $("#msg").show().html("操作成功").fadeOut(2000); 
            }else{ 
                $("#msg").show().html(data).fadeOut(2000); 
            } 
        }); 
    }); 

    CSS部分这里就不详细讲解,可下载素材后检查

    4、数据库部分:

    数据库构造曾经打包到附件(demo_02.sql),可直接导入。也可直接履行以下SQL语句

    CREATE TABLE IF NOT EXISTS `demo_01` ( 
      `id` int(11) NOT NULL, 
      `mood0` int(11) NOT NULL DEFAULT '0', 
      `mood1` int(11) NOT NULL DEFAULT '0', 
      `mood2` int(11) NOT NULL DEFAULT '0', 
      `mood3` int(11) NOT NULL DEFAULT '0', 
      `mood4` int(11) NOT NULL DEFAULT '0', 
      `mood5` int(11) NOT NULL DEFAULT '0', 
      `mood6` int(11) NOT NULL DEFAULT '0', 
      `mood7` int(11) NOT NULL DEFAULT '0', 
      PRIMARY KEY (`id`) 
    ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 
     
     
    INSERT INTO `demo_01` (`id`, `mood0`, `mood1`, `mood2`, `mood3`, `mood4`, `mood5`, `mood6`, `mood7`) 
    VALUES(1, 8, 6, 20, 16, 6, 9, 15, 21); 

    可以了,有甚么成绩迎接鄙人面留言

    评论辩论这个素材(8)答复他人成绩或分享运居心得会嘉奖牛币

    huhuachuan  SVIP
    2016年07月29日

    搜狐仿佛有这个器械

    答复
    闪***星  
    2016年08月05日

    这个用户体验比较好

    亡***师:确切很好
    答复
    闪***星  
    2016年08月15日

    很多多少处所都能看到这个

    答复
    lo***ng  
    2017年11月22日

    很多多少处所都能看到这个

    答复
    华***n  
    2017年12月26日

     感激分享

    答复
    pl***ig  
    2018年06月17日

     感激分享 欲望能学到器械

    答复
    艺***技  
    2018年09月14日

    不错!下载看看!

    答复
     文明上彀,理性说话!   😉 阿里云荣幸券,戳我支付
    我的牛币余额:0 已下载次数:24
    所需牛币:2 开端下载

    牛币获得:签到、评论、充值    » 在线充值(10牛币=1元)