废话少说,作为一个前端猿,首先上前端的代码。

1.上html代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>投票</title>
<script type='text/javascript' src='jquery-1.12.4.min.js'></script>
</head>
<body>
<h3>2016年度你最喜欢的港台男歌手是谁?</h3>
<form method="post">
<input name="gs" type="radio" value="0">古巨基<br/>
<input name="gs" type="radio" value="1">周杰伦<br/>
<input name="gs" type="radio" value="2">张杰<br/>
<input name="gs" type="radio" value="3">林俊杰<br/>
<input name="gs" type="radio" value="4">陈奕迅<br/>
<input type='button' id='qd' value="确定">
<button id="qx">取消</button>
</form>
<div class="biao">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</body>
</html>

2.上样式表代码

input[type="radio"],button{margin-top:10px;}
button,input[type="button"]{
border:none;
outline:medium;
background-image:none;
width:80px;
height:26px;
background:yellowgreen;
color:#fff;
}
.biao{width:400px;float:left;}
span{
display:block;
height:26px;
margin-top:4px;
color:#fff;
line-height:26px;
font-weight:;
font-size:0.8em;
}
span:nth-child(1){background:#0d73cf;width:0px;}
span:nth-child(2){background:#259f4a;width:0px;}
span:nth-child(3){background:#bdbf2d;width:0px;}
span:nth-child(4){background:#ef7716;width:0px;}
span:nth-child(5){background:#dd2c41;width:0px;}
form{float:left;width:200px;}

3.上jquery代码

        var sft=false;//设置是否投票了
$("#qd").on("click",function(){
if(sft==false){
$.ajax({
url:"toupiao.php",
type:"post",
data:{val:$("input:radio:checked").val()},
success:function(data){
var jsonobj=jQuery.parseJSON(data);
var sum=0;
//循环求出sum的总数
$.each(jsonobj,function(i,val){
sum+=parseInt(val);
});
//alert(sum);获取当前票占总数的百分比
for(var n=0;n<$("span").length;n++){
$("span").eq(n).animate({width:parseInt(jsonobj["g"+n])/sum*1000+"px"},1000);
var zf=jsonobj["g"+n]/sum*100+"";
$("span").eq(n).html(zf.substr(0,zf.indexOf(".")+4)+"%");
//alert(parseInt(jsonobj["g"+n])/sum*1000);
}
}
});
sft=true;
}else{
alert("你已经投过票了!");
$("input[type='button']").css("background","#ccc");
}
});

最后当然上的是php的代码咯!

  $val=$_POST["val"]; //获取前端界面传过来的值
$filename="toupiao.txt";//打开记录储存数据的txt文件
$content=file($filename);
$array=explode("||",$content[0]);//explode()类似于js里面的split();
//获取文件里面的初始值并用变量存储好
$h_1=$array[0];
$h_2=$array[1];
$h_3=$array[2];
$h_4=$array[3];
$h_5=$array[4];
switch ($val){
case 0:
$h_1++;
break;
case 1:
$h_2++;
break;
case 2:
$h_3++;
break;
case 3:
$h_4++;
break;
case 4:
$h_5++;
break;
default:
echo "没有选中任何歌手!";
}
//将新的数据插入到文件中
$inserttxt=$h_1."||".$h_2."||".$h_3."||".$h_4."||".$h_5;
//写入文件
$fp=fopen($filename,"w");
fputs($fp,$inserttxt);
fclose($fp);
$str='{"g0":"'.$h_1.'","g1":"'.$h_2.'","g2":"'.$h_3.'","g3":"'.$h_4.'","g4":"'.$h_5.'"}';
echo $str;

至于样式表和操作的js文件,在html里面我就并没有引入了。请自己新建对应的文件引入到html里面。

效果图:

ajax加php实现简单的投票效果的更多相关文章

  1. 第107天:Ajax 实现简单的登录效果

    使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...

  2. ajax加载菊花loading效果

    Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...

  3. 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法(转载) IEnumerable,ICollection,IList接口问题 不吹不擂,你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理

    服务器文档下载zip格式   刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...

  4. 写一个ajax程序就是如此简单

    写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发 ...

  5. jQuery Mobile 手动显示ajax加载器,提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  6. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  7. jQery简单Tab选项卡效果

    简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  8. java调用phantomjs采集ajax加载生成的网页

    java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...

  9. 学习Jammendo代码的心路历程(一)简单的淡出效果实现

    最近在看 Jammendo代码,打算将学习过程简单的记录下来,下面开始第一篇: 打开Jammendo运行之后,出弹出一个对话框,跳过对话框之后,会有一个淡出界面跳转到首页效果的实现.那么这个效果是怎么 ...

随机推荐

  1. poj 2184(dp变形,进一步加深01背包)

    点击打开链接 题意: 给你n个物品,每个物品都有两个属性,s和f,要求选择一些物品,使sum(s)+sum(f)最大,并且sum(s)>=0&&sum(f)>=0, 根据0 ...

  2. Windows 8 Store Apps

    重新想象 Windows 8 Store Apps 系列文章索引 Posted on 2013-11-18 08:33 webabcd 阅读(672) 评论(3) 编辑 收藏 [源码下载] 重新想象 ...

  3. Twitter算法

    算法实践——Twitter算法面试题(积水问题)的线性时间解法   问题描述:在下图里我们有不同高度的挡板.这个图片由一个整数数组所代表,数组中每个数是墙的高度.下图可以表示为数组(2.5.1.2.3 ...

  4. 网站部署到Windows Azure Website上

    使用CSDN Code将网站部署到Windows Azure Website上 在云计算时代,开发和部署应该是完全统一和集成的.在海外,开发者可以用github来管理他们的代码,并且直接部署到Wind ...

  5. oracle exp、imp实现导出导入

    一.说明    oracle 的exp/imp命令用于实现对数据库的导出/导入操作; exp命令用于把数据从远程数据库服务器导出至本地,生成dmp文件; imp命令用于把本地的数据库dmp文件从本地导 ...

  6. tomcat配置数据池

    1->配置servlet.xml 在 <GlobalNamingResources></GlobalNamingResources>中添加<Resource> ...

  7. 依赖倒置原则DIP(面向接口编程—OOD)

    含义: 1.高层模块不应该依赖底层模块,两者都应该依赖其抽象. 2.抽象不应该依赖细节. 3.细节应该依赖抽象. 底层模块:不可分割的原子逻辑. 高层模块: 原子逻辑的再组装. 抽象:接口或者抽象类, ...

  8. MVVM1

    silverlight的数据校验大体分成3种类型: 数据是非必填的但是需要满足相应数据格式的 数据是必填的且可能需要进行数据格式校验的 其他(如数据的联动校验) 以下的数据校验方式针对第二种: 在相应 ...

  9. js广告轮询效果

    var intervalTime = 5000; var showIndex = 0; var imageLength=0; $(window).load(function () { var heig ...

  10. Linux内核 hlist_head/hlist_node结构解析

    内核中的定义: struct hlist_head {    struct hlist_node *first;}; struct hlist_node {    struct hlist_node ...