用 PHP+MySql+JQuery 可以轻松实现一个投票功能,这里给出一个我自己写的一个例子,供参考。

主要思路和步骤:

  • DIV+CSS 创建投票页面
  • 通过 JQuery 获取投票选项的值
  • 通过 JQuery 发送投票的结果值给 PHP 处理,PHP 返回结果
  • 通过 PHP 返回的结果来用 CSS 样式控制投票的结果图
  • 利用 Cookie 控制投票限制(可以下载JQuery Cookie 插件

截图:

PHP+JQuery Ajax投

HMTL 简单代码:

创建一个类似截图中投票

<div>
你觉得这个应用怎么样?
<ul>
	<li><input type="radio" name="vote" value="1" /><span>很好</span></li>
	<li><input type="radio" name="vote" value="2" /><span>很差</span></li>
</ul>
<div><input id="vote" type="button" name="vote" value="投票" /></div>
</div>

CSS 简单代码:

用 CSS 设置长度,宽度,和背景色

.main .appinfo .app_right .vote {
    padding: 5px 5px 5px 10px;
}

.main .appinfo .app_right .vote .notice {
    color: red;
    left: 10px;
    position: relative;
    top: 10px;
}

.main .appinfo .app_right .vote .title {
    padding: 5px 0px 5px 0px;
}

.main .appinfo .app_right .vote ul {
    list-style: none;
}

.main .appinfo .app_right .vote ul li {
    text-align: left;
    padding: 5px 0px;
}

.main .appinfo .app_right .vote ul li span {
    padding: 0px 5px;
}

.main .appinfo .app_right .vote ul li div {
    float: right;
    height: 15px;
    margin: 0 50px 0 0;
    width: 120px;
    cursor: pointer;
}

.main .appinfo .app_right .vote ul li div div {
    float: left;
}
.main .appinfo .app_right .vote ul li div .good {
    background-color: greenyellow;
}
.main .appinfo .app_right .vote ul li div .bad {
    background-color: red;
}

.main .appinfo .app_right .vote ul li div em {
    float: right;
    position: relative;
    right: -40px;
    top: -15px;
}

.main .appinfo .app_right .vote .submit_vote {
    float: right;
    background-color: deepskyblue;
    border: medium none;
    float: left;
    margin-top: 5px;
}

.main .screen {
    text-align: left;
    padding: 5px 5px;
    font: normal bold 15px/20px Tahoma, Arial, sans-serif;
}

JQuery 简单代码

通过 JQuery 中的$.post 方法,向 PHP 请求,页面加载的时候应该现实结果,点击的时候返回新的投票结果,并更改样式

$.post(
	'ajax.php',
	{
		vote:'3'  //页面加载时候发送3
	},
	function (data)   //返回的上次投票结果
	{
		var myjson='';
		eval('myjson=' + data + ';');
		$(".good").css('width',myjson.good+'%');
		$(".bad").css('width',myjson.bad+'%');
		$("#good").text(myjson.good+'%');
		$("#bad").text(myjson.bad+'%');
	}
);
$("#vote").click(function(){
	if($.cookie('cookie'))
	{
		$("#notice").text('你已经投过票了,谢谢支持!');
	}
	else
	{
		$.post(
			'index.php?c=app&a=ajax_vote',
			{
				id:$("input[name=id]").val(),
				vote:$("input[name=vote]:checked").val()
			},
			function (data)
			{
				var myjson='';
				eval('myjson=' + data + ';');
				$(".good").css('width',myjson.good+'%');
				$(".bad").css('width',myjson.bad+'%');
				$("#good").text(myjson.good+'%');
				$("#bad").text(myjson.bad+'%');
				$("#notice").text('投票成功,谢谢支持!');
				$.cookie('cookie','cookie')
			}
		);
	}

})
);

PHP 简单代码(ajax.php):

PHP 程序主要是接受 ajax 请求的数据和数据库交互,获取结果,并返回给页面

$vote = $_REQUEST;
$result = array();
if($vote['vote'] == 3)
{
	;
}
if($vote['vote'] == 1)
{
	$sql1 = "update dt_assessrank set good=good+1 where appID='1'";
	$query = mysql_query($sql1);
}
if($vote['vote'] == 2)
{
	$sql1 = "update dt_assessrank set bad=bad+1 where appID='1'";
	$query = mysql_query($sql1);
}
$sql = "select good,bad from dt_assessrank where appID='1'";
$query = mysql_query($sql);
$result = mysql_fetch_array($query);
$arr['good'] = number_format($result['good']/($result['good']+$result['bad']), 3,'.','')*100;
$arr['bad']  = number_format($result['bad']/($result['good']+$result['bad']), 3,'.','')*100;
echo json_encode($arr);

这样实现了投票功能,是不是很简单,很美观!

转载请注明: 转载自Ryan 是菜鸟 | LNMP 技术栈笔记

如果觉得本篇文章对您十分有益,何不 打赏一下

谢谢打赏

本文链接地址: PHP+MySql+JQuery 轻松实现 Ajax 投票功能

知识共享许可协议 本作品采用知识共享署名-非商业性使用 4.0 国际许可协议进行许可