个人中心
文章发布
退出
作者热门文章
- ubuntu12.04环境下使用kvm ioctl接口实现最简单的虚拟机
- Ubuntu 通过无线网络安装Ubuntu Server启动系统后连接无线网络的方法
- 在Ubuntu上搭建网桥的方法
- ubuntu 虚拟机上网方式及相关配置详解
29
4
CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.
这篇CFSDN的博客文章用php和jQuery来实现“顶”和“踩”的投票功能由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.
当我们浏览网页时，我们想对网页内容如文章、评论中的观点持赞同或反对意见时，可以通过点击网页中的“顶”和“踩”来进行投票。而整个交互过程，开发者可以通过ajax异步来实现，从而提高用户体验.
我们先要准备为整个实例运行所需的mysql数据表，实例中需要两个表，votes表用来记录对应文章或评论的用户投票数，并且我们默认写入一条id为1的数据以便演示，votes_ip表用来记录用户每次投票的IP，程序根据用户IP决定投票是否有效.
数据表 。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
CREATE
TABLE
IF
NOT
EXISTS `votes` (
`id`
int
(10)
NOT
NULL
AUTO_INCREMENT,
`likes`
int
(10)
NOT
NULL
DEFAULT
'0'
,
`unlikes`
int
(10)
NOT
NULL
DEFAULT
'0'
,
PRIMARY
KEY
(`id`)
) ENGINE=MyISAM
DEFAULT
CHARSET=utf8;
INSERT
INTO
`votes` (`id`, `likes`, `unlikes`)
VALUES
(1, 30, 10);
CREATE
TABLE
IF
NOT
EXISTS `votes_ip` (
`id`
int
(10)
NOT
NULL
,
`vid`
int
(10)
NOT
NULL
,
`ip`
varchar
(40)
NOT
NULL
) ENGINE=MyISAM
DEFAULT
CHARSET=utf8;
|
HTML 。
在页面中，有两个分别表示“顶”和“踩”的按钮，即#dig_up和#dig_down，按钮上记录了投票的票数以及分别所占的百分比，非常直观的对比投票结果.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<
div
class
=
"digg"
>
<
div
id
=
"dig_up"
class
=
"digup"
>
<
span
id
=
"num_up"
></
span
>
<
p
>很好，很强大！</
p
>
<
div
id
=
"bar_up"
class
=
"bar"
><
span
></
span
><
i
></
i
></
div
>
</
div
>
<
div
id
=
"dig_down"
class
=
"digdown"
>
<
span
id
=
"num_down"
></
span
>
<
p
>太差劲了！</
p
>
<
div
id
=
"bar_down"
class
=
"bar"
><
span
></
span
><
i
></
i
></
div
>
</
div
>
<
div
id
=
"msg"
></
div
>
</
div
>
|
CSS 。
我们必须使用CSS来美化页面，我们使用一张图diggs.png来定位不同的按钮背景，通过设置position来定位各元素之间的位置关系.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
.digg{
width
:
420px
;
height
:
120px
;
margin
:
80px
auto
20px
auto
;
position
:
relative
}
#dig_up,#dig_down{
width
:
200px
;
height
:
48px
;
margin
:
10px
;
position
:
relative
;
border
:
1px
solid
#d3d3d3
;
padding-left
:
42px
;
cursor
:
pointer
}
.digup{
background
:
url
(diggs.png)
no-repeat
4px
2px
;}
.digup_on{
background
:
url
(diggs.png)
no-repeat
4px
-49px
;}
.digdown{
background
:
url
(diggs.png)
no-repeat
4px
-102px
;}
.digdown_on{
background
:
url
(diggs.png)
no-repeat
4px
-154px
;}
#num_up,#num_down{
position
:
absolute
;
right
:
6px
;
top
:
18px
;
font-size
:
20px
;}
#dig_up p{
height
:
24px
;
line-height
:
24px
;
color
:
#360
}
#dig_down p{
height
:
24px
;
line-height
:
24px
;
color
:
#f30
}
.bar{
width
:
100px
;
height
:
12px
;
line-height
:
12px
;
border
:
1px
solid
#f0f0f0
;
position
:
relative
;
text-align
:
center
}
.bar span{
display
:
block
;
height
:
12px
; }
.bar i{
position
:
absolute
;
top
:
0
;
left
:
104px
;}
#bar_up span{
background
:
#360
}
#bar_down span{
background
:
#f60
}
#msg{
position
:
absolute
;
right
:
20px
;
top
:
40px
;
font-size
:
18px
;
color
:
#f00
}
|
jQuery 。
本示例还依赖于jQuery，因此一定不能忘了在页面中先载入jquery库文件。 首先，jQuery要处理的是鼠标分别滑向两个投票按钮时变换的背景图片，通过addClass()和removeClass()来实现.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
$(
function
(){
//鼠标滑向和离开投票按钮时，变换背景样式
$(
"#dig_up"
).hover(
function
(){
$(
this
).addClass(
"digup_on"
);
},
function
(){
$(
this
).removeClass(
"digup_on"
);
});
$(
"#dig_down"
).hover(
function
(){
$(
this
).addClass(
"digdown_on"
);
},
function
(){
$(
this
).removeClass(
"digdown_on"
);
});
//初始化数据
getdata(
"do.php"
,1);
//单击“顶”时
$(
"#dig_up"
).click(
function
(){
getdata(
"do.php?action=like"
,1);
});
//单击“踩”时
$(
"#dig_down"
).click(
function
(){
getdata(
"do.php?action=unlike"
,1);
});
});
|
然后，我们初始化数据，就是页面加载后，要显示初始的已经投票的结果，包括各投票数和所占百分比。我们将获取数据的操作写在一个自定义函数getdata()中，通过传递不同的请求地址和id参数来完成数据的载入。函数getdata()中，向URL发送一个ajax请求，根据后台处理的返回结果，如果投票成功则更改页面中相应的元素内容，包括投票数和所占百分比.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function
getdata(url,sid){
$.getJSON(url,{id:sid},
function
(data){
if
(data.success==1){
//投票成功
$(
"#num_up"
).html(data.like);
//通过控制宽度来显示百分比进度条效果
$(
"#bar_up span"
).css(
"width"
,data.like_percent);
$(
"#bar_up i"
).html(data.like_percent);
$(
"#num_down"
).html(data.unlike);
$(
"#bar_down span"
).css(
"width"
,data.unlike_percent);
$(
"#bar_down i"
).html(data.unlike_percent);
}
else
{
//投票失败
$(
"#msg"
).html(data.msg).show().css({
'opacity'
:1,
'top'
:
'40px'
})
.animate({top:
'-50px'
,opacity:0},
"slow"
);
}
});
}
|
PHP 。
数据的获取都是通过do.php来完成，do.php根据前端页面传递的参数，连接数据库，根据条件判断分别进入“顶”、“踩”和初始数据处理模块，以下是do.php模块代码结构:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
include_once
(
"connect.php"
);
//连接数据库
$action
=
$_GET
[
'action'
];
$id
= 1;
$ip
= get_client_ip();
//获取ip
if
(
$action
==
'like'
){
//顶
likes(1,
$id
,
$ip
);
}
elseif
(
$action
==
'unlike'
){
//踩
likes(0,
$id
,
$ip
);
}
else
{
echo
jsons(
$id
);
}
|
函数likes()用来处理“顶”和“踩”投票模块，首先是判断用户IP是否已经投票过了，如果已经投票则直接返回相应提示，如果用户IP没有投票记录则更新votes表，将对应的投票数加1，然后向votes_ip表中插入该用户的IP记录，如果操作成功，则调用jsons()输出投票后的投票数和所占百分比等数据，否则输入操作失败的提示信息.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
function
likes(
$type
,
$id
,
$ip
){
$ip_sql
=mysql_query(
"select ip from votes_ip where vid='$id' and ip='$ip'"
);
$count
=mysql_num_rows(
$ip_sql
);
if
(
$count
==0){
//还没有顶过
if
(
$type
==1){
//顶
$sql
=
"update votes set likes=likes+1 where id="
.
$id
;
}
else
{
//踩
$sql
=
"update votes set unlikes=unlikes+1 where id="
.
$id
;
}
mysql_query(
$sql
);
$sql_in
=
"insert into votes_ip (vid,ip) values ('$id','$ip')"
;
mysql_query(
$sql_in
);
if
(mysql_insert_id()>0){
echo
jsons(
$id
);
}
else
{
$arr
[
'success'
] = 0;
$arr
[
'msg'
] =
'操作失败，请重试'
;
echo
json_encode(
$arr
);
}
}
else
{
$msg
=
$type
==1?
'您已经顶过了'
:
'您已经踩过了'
;
$arr
[
'success'
] = 0;
$arr
[
'msg'
] =
$msg
;
echo
json_encode(
$arr
);
}
}
|
函数jsons()用来读取votes表中相应id的投票数，并计算百分比，最后将这些信息以json格式输出，供前端页面使用.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
function
jsons(
$id
){
$query
= mysql_query(
"select * from votes where id="
.
$id
);
$row
= mysql_fetch_array(
$query
);
$like
=
$row
[
'likes'
];
$unlike
=
$row
[
'unlikes'
];
$arr
[
'success'
]=1;
$arr
[
'like'
] =
$like
;
$arr
[
'unlike'
] =
$unlike
;
$like_percent
=
round
(
$like
/(
$like
+
$unlike
),3)*100;
$arr
[
'like_percent'
] =
$like_percent
.
'%'
;
$arr
[
'unlike_percent'
] = (100-
$like_percent
).
'%'
;
return
json_encode(
$arr
);
}
|
该实例可以应用到常见的"赞"、同意和反对评论、投票系统等场景中，运用了Ajax原理实现的前后端交互功能。do.php中还有个函数get_client_ip()用来获取用户真实IP.
以上就是本文的全部内容，希望对大家学习php程序设计有所帮助.
最后此篇关于用php和jQuery来实现“顶”和“踩”的投票功能的文章就讲到这里了,如果你想了解更多关于用php和jQuery来实现“顶”和“踩”的投票功能的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。
29
4
0
背景: 我最近一直在使用 JPA，我为相当大的关系数据库项目生成持久层的轻松程度给我留下了深刻的印象。 我们公司使用大量非 SQL 数据库，特别是面向列的数据库。我对可能对这些数据库使用 JPA 有一
我已经在我的 maven pom 中添加了这些构建配置，因为我希望将 Apache Solr 依赖项与 Jar 捆绑在一起。否则我得到了 SolarServerException: ClassNotF
interface ITurtle { void Fight(); void EatPizza(); } interface ILeonardo : ITurtle {
我希望可用于 Java 的对象/关系映射 (ORM) 工具之一能够满足这些要求: 使用 JPA 或 native SQL 查询获取大量行并将其作为实体对象返回。 允许在行(实体)中进行迭代，并在对当前
好像没有，因为我有实现From for 的代码, 我可以转换 A到 B与 .into() , 但同样的事情不适用于 Vec .into()一个Vec . 要么我搞砸了阻止实现派生的事情，要么这不应该发
在 C# 中，如果 A 实现 IX 并且 B 继承自 A ，是否必然遵循 B 实现 IX？如果是，是因为 LSP 吗？之间有什么区别吗: 1. Interface IX; Class A : IX;
就目前而言，这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
我正在阅读标准haskell库的(^)的实现代码: (^) :: (Num a, Integral b) => a -> b -> a x0 ^ y0 | y0 a -> b ->a expo x0
我将把国际象棋游戏表示为 C++ 结构。我认为，最好的选择是树结构(因为在每个深度我们都有几个可能的移动)。 这是一个好的方法吗？ struct TreeElement{ SomeMoveType
我正在为用户名数据库实现字符串匹配算法。我的方法采用现有的用户名数据库和用户想要的新用户名，然后检查用户名是否已被占用。如果采用该方法，则该方法应该返回带有数据库中未采用的数字的用户名。 例子: “贾
我正在尝试实现 Breadth-first search algorithm , 为了找到两个顶点之间的最短距离。我开发了一个 Queue 对象来保存和检索对象，并且我有一个二维数组来保存两个给定顶点
我目前正在 ika 中开发我的 Python 游戏，它使用 python 2.5 我决定为 AI 使用 A* 寻路。然而，我发现它对我的需要来说太慢了(3-4 个敌人可能会落后于游戏，但我想供应 4-
我正在寻找 Kademlia 的开源实现C/C++ 中的分布式哈希表。它必须是轻量级和跨平台的(win/linux/mac)。 它必须能够将信息发布到 DHT 并检索它。 最佳答案 OpenDHT是
我在一本书中读到这一行:-“当我们要求 C++ 实现运行程序时，它会通过调用此函数来实现。” 而且我想知道“C++ 实现”是什么意思或具体是什么。帮忙!？ 最佳答案 “C++ 实现”是指编译器加上链接
我正在尝试使用分支定界的 C++ 实现这个背包问题。此网站上有一个 Java 版本:Implementing branch and bound for knapsack 我试图让我的 C++ 版本打印
在很多情况下，我需要在 C# 中访问合适的哈希算法，从重写 GetHashCode 到对数据执行快速比较/查找。 我发现 FNV 哈希是一种非常简单/好/快速的哈希算法。但是，我从未见过 C# 实现的
目录 LRU缓存替换策略 核心思想 不适用场景 算法基本实现 算法优化
1. 绪论 在前面文章中提到 空间直角坐标系相互转换 ，测绘坐标转换时，一般涉及到的情况是：两个直角坐标系的小角度转换。这个就是我们经常在测绘数据处理中，WGS-84坐标系、54北京坐标系
在软件开发过程中，有时候我们需要定时地检查数据库中的数据，并在发现新增数据时触发一个动作。为了实现这个需求，我们在 .Net 7 下进行一次简单的演示. PeriodicTimer .
二分查找 二分查找算法，说白了就是在有序的数组里面给予一个存在数组里面的值key，然后将其先和数组中间的比较，如果key大于中间值，进行下一次mid后面的比较，直到找到相等的，就可以得到它的位置。
我是一名优秀的程序员,十分优秀！