怎么在php中利用jQuery实现一个投票功能

　　介绍

这篇文章将为大家详细讲解有关怎么在php中利用jQuery实现一个投票功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。

<强>数据表

CREATE  TABLE  IF  NOT  EXISTS “选票”,(, 　　,“id”int (10), NOT  NULL  AUTO_INCREMENT,, 　　,'喜欢' int (10), NOT  NULL  DEFAULT  & # 39; 0 & # 39;,, 　　,“不像”int (10), NOT  NULL  DEFAULT  & # 39; 0 & # 39;,, 　　,PRIMARY  KEY  (id), 　　),引擎=MyISAM  DEFAULT  CHARSET=utf8,, 　　, 　　, 　　INSERT  INTO “选票”,(“id”,“喜欢”,,“不像”),VALUES  　　(1,,30岁,10),, 　　, 　　CREATE  TABLE  IF  NOT  EXISTS “votes_ip”, (, 　　,“id”int (10), NOT 空,, 　　,“视频”int (10), NOT 空,, 　　,“知识产权”varchar (40), NOT  NULL  　　),引擎=MyISAM  DEFAULT  CHARSET=use utf8;

<强> HTML

在页面中,有两个分别表示“顶”和“踩”的按钮,即dig_up #和# dig_down,按钮上记录了投票的票数以及分别所占的百分比,非常直观的对比投票结果。

& lt; div 类=癲igg"祝辞, 　　,& lt; div  id=癲ig_up",类=癲igup"祝辞, 　　& lt;才能span  id=皀um_up"祝辞& lt;/span>, 　　& lt; p>才能很好,很强大! & lt;/p>, 　　& lt;才能div  id=癰ar_up",类=癰ar"祝辞& lt; span> & lt;/span> & lt; i> & lt;/i> & lt;/div>, 　　& lt;/div>大敌; 　　& lt;才能div  id=癲ig_down",类=癲igdown"祝辞, 　　& lt;才能span  id=皀um_down"祝辞& lt;/span>, 　　& lt;才能p>太差劲了! & lt;/p>, 　　& lt;才能div  id=癰ar_down",类=癰ar"祝辞& lt; span> & lt;/span> & lt; i> & lt;/i> & lt;/div>, 　　& lt;/div>大敌; 　　,& lt; div  id=癿sg"祝辞& lt;/div>, 　　& lt;/div>

<强> CSS

我们必须使用CSS来美化页面,我们使用一张图digg。png来定位不同的按钮背景,通过设置位置来定位各元素之间的位置关系。

.digg{宽度:420 px;,身高:120 px;,保证金:80 px  auto  20 px 汽车;,位置:相对}, 　　# dig_up, # dig_down{宽度:200 px;,高度:48 px;,保证金:10 px;,位置:相对,, 　　边界:1 px  solid  # d3d3d3;, padding-left: 42 px;,光标:指针}, 　　.digup{背景:url (diggs.png), no-repeat  4 px  2 px;}, 　　.digup_on{背景:url (diggs.png), no-repeat  4 px  -49 px;}, 　　.digdown{背景:url (diggs.png), no-repeat  4 px  -102 px;}, 　　.digdown_on{背景:url (diggs.png), no-repeat  4 px  -154 px;}, 　　# num_up, # num_down{:绝对;,右:6 px;,上图:18 px;,字体大小:20 px;}, 　　# dig_up  p{高度:24 px;,行高:24 px;,颜色:# 360}, 　　# dig_down  p{高度:24 px;,行高:24 px;,颜色:# + 30}, 　　. bar{宽度:100 px;,高度:12 px;,行高:12 px;,边界:1 px  solid  # f0f0f0;, 　　位置:相对;,text-align:中心}, 　　.bar 跨度{显示:块;,高度:12 px;,}, 　　.bar 我{位置:绝对的,,:0;,左:104 px;}, 　　# bar_up 跨度{背景:# 360}, 　　# bar_down 跨度{背景:#法郎}, 　　#味精{:绝对;,右:20 px;,上图:40 px;,字体大小:18 px;,颜色:# f00}

<强> jQuery

本示例还依赖于jQuery,因此一定不能忘了在页面中先载入jQuery库文件。
首先,jQuery要处理的是鼠标分别滑向两个投票按钮时变换的背景图片,通最好选择用addClass()和removeClass替代过()来实现。

(函数(){美元, 　　,//鼠标滑向和离开投票按钮时,变换背景样式, 　　,$ (“# dig_up") .hover(函数(){, 　　(一)美元才能.addClass (“digup_on");, 　　{,,},功能() 　　(一)美元才能.removeClass (“digup_on");, 　　,}); 　　,$ (“# dig_down") .hover(函数(){, 　　(一)美元才能.addClass (“digdown_on");, 　　{,,},功能() 　　(一)美元才能.removeClass (“digdown_on");, 　　,}); 　　,, 　　,//初始化数据, 　　,getdata (“do.php" 1),, 　　,, 　　,//单击“顶”时, 　　,$ (“# dig_up") .click(函数(){, 　　getdata才能(“do.php ? action=like", 1),, 　　,}); 　　,//单击“踩”时, 　　,$ (“# dig_down") .click(函数(){, 　　getdata才能(“do.php ? action=unlike", 1),, 　　,}); 　　});

然后,我们初始化数据,就是页面加载后,要显示初始的已经投票的结果,包括各投票数和所占百分比。我们将获取数据的操作写在一个自定义函数getdata()中,通过传递不同的请求地址和id参数来完成数据的载入。函数getdata()中,向URL发送一个ajax请求,根据后台处理的返回结果,如果投票成功则更改页面中相应的元素内容,包括投票数和所占百分比。

怎么在php中利用jQuery实现一个投票功能