PHP网页设计PHP+jQuery+Ajax+Mysql完成宣布心境功效...

学会了PHP，那么学其他的语言，肯定速成，反过来也一样，如果你之前学过其他的语言，那么学PHP肯定快。     
咱们在阅读网站文章或帖子后，需求表达本人阅读后的心境感触感染，在良多网站都供应了给用户宣布心境的功效，经由过程这个功效可以直不雅统计剖析文章或帖子的阅读者的心境感触感染数据。在本文中，您将懂得到，若何完成经由过程点击心境图标，即刻宣布本人的心境。

登录/注册后可看大图

下载 http://bbs.php100.com/read-htm-tid-391083-ds-1.html

本文经由过程实例解说利用PHP+jQuery+Ajax+Mysql相联合，完成了用户宣布心境的功效，操作复杂，适用性强，是一篇将WEB常识停止综合使用的文章，因而读者需求具有PHP、Mysql、jQuery和ajax相干常识。
本示例的大致道理和流程是如许的：主页面index.html经由过程ajax获得心境图标及柱状图相干数据，当用户点击个中的一个心境图标时，向后台php发送恳求，PHP验证用户cookie避免反复提交，然后将mysql中对应的数据心境字段内容加1，胜利后前往前端页面，告知index.html宣布胜利，并调剂柱状图和统计数据。
HTML

先看HTML，咱们在index.html中放置一个#msg，用来显示操作了局信息，#mood是操作主区域，个中ul经由过程javascript异步加载心境图标、申明、柱状图和统计信息。

1.    <div id="msg"></div>      <div id=mood>      <ul></ul>  </div>  

复制代码

PHP

起首咱们在config.php设置装备摆设文件中，设置装备摆设数据库毗连信息，和示例相干参数。

1.    $host="localhost";  $db_user="root";  $db_pass="";  $db_name="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中筹办分两局部，经由过程吸收action参数，分为第一局部：宣布心境，第二局部：获得心境相干信息。

1.    include_once("config.php");    $action = $_GET['action'];  if($action=='send'){ //宣布
   心境
         ...  }else{ //获得
   心境
         ...  }  

复制代码

Part1：宣布心境。
用户夙昔端经由过程post提交宣布心境的参数，包含文章id，心境id。先验证文章是不是存在，然后再验证用户是不是已对这篇文章宣布过心境了，接着操作数据库，将对应的心境字段值+1，并盘算出以后心境对应的柱状图的高度，前往给前端js吸收。

1.    $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是不是存在。

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

复制代码

Part2：获得心境
经由过程获得数据表中文章或帖子id对应的心境数据，失掉每种心境对应的值（可以了解为宣布心境的次数），并盘算其柱状图高度，将每种心境对应的值、称号、图标、高度信息机关成数组，终究以JSON格局数据前往给前端。

1.    $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数据  }  

复制代码

jQuery

咱们利用壮大的jQuery来完本钱例中一切ajax的交互举措，因而在index.html中要先载入jquery.js库，今朝1.8版本已宣布了哦，可以到官网http://jquery.com/下载。
接着咱们向mood.php发送Ajax恳求，获得心境列表信息，并展现在index.html页面中。

1.    $(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 = "<li><span>"+array['mood_val']+"</span><div class=\"pillar\"   style=\"height:"+array['height']+"px;\"></div><div class=\"face\"   rel=\""+array['mid']+"\"><img src=\"images/"+array['mood_pic']+"\">  <br/>"+array['mood_name']+"</div></li>";                      $("#mood ul").append(str); //将数据到场
   到#mood ul列表中                     });               }          }      });      ...  });  

复制代码

如许，咱们在会见index.html后，页面会载入心境列表，固然要想看到终究分列后果，还需求CSS，本文不解说相干CSS，请下载源码或检查demo懂得。
接上去，咱们有个交互举措，当点击对应的心境图标时，图标被标识为已宣布，柱状图高度产生变更，而且下面的数字会+1，暗示宣布胜利，假如持续点击心境图标，会提醒已宣布过不克不及反复提交。请看代码：

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);          }      });  });  

复制代码

没看分明的童鞋可以下载源码细心研讨，点击文章开首的Download按钮便可下载，最初附上本例所需的mysql数据表布局，感谢您的存眷。

1.    CREATE TABLE IF NOT EXISTS `mood` (    `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 `mood` (`id`, `mood0`, `mood1`, `mood2`, `mood3`, `mood4`, `mood5`, `mood6`, `mood7`)  VALUES(1, 8, 6, 20, 16, 6, 9, 15, 21);

复制代码

告诉你了一个方式，但是缺少努力这一环节，那也是白搭。

首推的搜索引擎当然是Google大神，其次我比较喜欢 百度知道。不过搜出来的结果往往都是 大家copy来copy去的，运气的的概率很大。

个人呢觉得，配wamp 最容易漏的一步就是忘了把$PHP$目录下的libmysql.dll拷贝到windows系统目录的system32目录下，还有重启apache。

Ps：以上纯属原创，如有雷同，纯属巧合

做为1门年轻的语言，php一直很努力。

最后介绍一个代码出错，但是老找不到错误方法，就是 go to wc （囧），出去换换气没准回来就找到错误啦。

最后祝愿，php会给你带来快乐的同时 你也会给他带来快乐。

本文当是我的笔记啦，遇到的问题随时填充

这些都是最基本最常用功能，我们这些菜鸟在系统学习后，可以先对这些功能深入研究。

在学习的过程中不能怕麻烦，不能有懒惰的思想。学习php首先应该搭建一个lamp环境或者是wamp环境。这是学习php开发的根本。虽然网络上有很多集成的环境，安装很方便，使用起来也很稳定、

在我安装pear包的时候老是提示，缺少某某文件，才发现 那群extension 的排列是应该有一点的顺序，而我安装的版本的排序不是正常的排序。没办法我只好把那群冒号加了上去，只留下我需要使用的扩展。

学好程序语言，多些才是王道，写两个小时代码的作用绝对超过看一天书，这个我是深有体会（顺便还能练打字速度）。

这些中手常用的知识，当你把我说的这些关键字都可以熟练运用的时候，你可以选择自己

刚开始安装php的时候，我图了个省事，把php的扩展全都打开啦（就是把php.ini 那一片 extension 前面的冒号全去掉啦），这样自然有好处，以后不用再需要什么功能再来打开。

写js我最烦的就是 ie 和 firefox下同样的代码 结果显示的结果千差万别，还是就是最好不要用遨游去调试，因为有时候遨游是禁用js的，有可能代码是争取结果被遨游折腾的认为是代码写错。

这些都是最基本最常用功能，我们这些菜鸟在系统学习后，可以先对这些功能深入研究。

写的比较杂，因为我也是个新手，不当至于大家多多指正。

最后祝愿，php会给你带来快乐的同时 你也会给他带来快乐。

我还是推荐用firefox ，配上firebug 插件调试js能省下不受时间。谷歌的浏览器最好也不少用，因为谷歌的大侠们实在是太天才啦，把一些原来的js代码加了一些特效。

不禁又想起那些说php是草根语言的人，为什么认得差距这么大呢。