ajax加php实现简单的投票效果
废话少说，作为一个前端猿，首先上前端的代码。
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实现简单的投票效果的更多相关文章
- 第107天：Ajax 实现简单的登录效果
使用 Ajax 实现简单的登录效果 Ajax是一项使局部网页请求服务器信息,而不需整体刷新网页内容的异步更新技术.这使得向服务器请求的数据量大大减少,而且不会因局部的请求失败而影响到整体网页的加载. ...
- ajax加载菊花loading效果
Ajax异步请求的时候,一般都会利用一个动态的gif小图片来制作一个Ajax Loading,以便增加用户体验. 这里我们可以使用Spin.js,该js脚本压缩后5k,可以不用任何图片,任何外部CSS ...
- 服务器文档下载zip格式 SQL Server SQL分页查询 C#过滤html标签 EF 延时加载与死锁 在JS方法中返回多个值的三种方法（转载） IEnumerable,ICollection,IList接口问题 不吹不擂，你想要的Python面试都在这里了【315+道题】 基于mvc三层架构和ajax技术实现最简单的文件上传 事件管理
服务器文档下载zip格式 刚好这次项目中遇到了这个东西,就来弄一下,挺简单的,但是前台调用的时候弄错了,浪费了大半天的时间,本人也是菜鸟一枚.开始吧.(MVC的) @using Rattan.Co ...
- 写一个ajax程序就是如此简单
写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发 ...
- jQuery Mobile 手动显示ajax加载器，提示加载中...
在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- jQery简单Tab选项卡效果
简单的Tab效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- java调用phantomjs采集ajax加载生成的网页
java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...
- 学习Jammendo代码的心路历程（一）简单的淡出效果实现
最近在看 Jammendo代码,打算将学习过程简单的记录下来,下面开始第一篇: 打开Jammendo运行之后,出弹出一个对话框,跳过对话框之后,会有一个淡出界面跳转到首页效果的实现.那么这个效果是怎么 ...
随机推荐
- Content Negotiation(内容协商)
Asp.Net Web API 2第十四课——Content Negotiation(内容协商) 前言 阅读本文之前,您也可以到Asp.Net Web API 2 系列导航进行查看 http:// ...
- 正则表达式（c#）
只能输入数字:"^[0-9]*$". 只能输入n位的数字:"^\d{n}$". 只能输入至少n位的数字:"^\d{n,}$". 只能输入 ...
- Python：Module Install Issues
Python里的Module安装过程总有一些奇怪的坑,在此整理一下,以供再遇到此类问题参看 (当然如果这篇文章有人看的话,希望能对你有所帮助~) 目前碰到的主要是以下几种: 0.使用PyCharm 1 ...
- NuGet的本地服务器安装与Package的发布
NuGet的本地服务器安装与Package的发布 主要的步骤是按照下面的例子来做的: NuGet学习笔记(1)——初识NuGet及快速安装使用 NuGet学习笔记(2)——使用图形化界面打包自己的类库 ...
- NHIBERNATE的简单框架的设计
NHIBERNATE的简单框架的设计 上次的 NHibernate的Session管理策略和NHibernateHelper 发布并提供下载,给NHibernate刚入门的同学们带来很多便利. 最近有 ...
- iOS 开发之协议-代理传值
刚开始做iOS开发的时候,对 protocol.delegate 的理解一直都是晕晕乎乎一知半解的状态,不知道两个UIViewController之间怎么进行传值. 面试过几个童鞋,问道怎么用 del ...
- opengl离屏渲染（不需要和窗口绑定，仅当作一个可以渲染一张图片的API使用）+ opencv显示
具体过程参考的是这篇BLOG: http://wiki.woodpecker.org.cn/moin/lilin/swig-glBmpContext 这一片BLOG的代码有个 BOOL SaveBmp ...
- 史上最全条件编译解析 #ifdef #ifndef #undef #else #endif
C语言和C++语言程序中广泛存在着#ifdef或#ifndef等条件编译语句,本篇就系统介绍下他们的用法. 这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分 ...
- LuaBridge 中C++类和继承示例
luabridge不是一个陌生的名字,GIT上已经有3-4年多没有更新.将lua和C++相互调用封装的很方便,比如以下示例代码: /////////////////////////////////// ...
- 应用之星在线app开发平台，菜鸟也会做应用
看着各类应用平台玲琅满目的应用,你是否幻想过,如果里面能有一款我开发的应用是件多NB的事,平凡的你肯定会说,我又不会设计又不会代码,怎么可能?现在告诉你,这不是幻想,即使你不会设计也不会代码,一样可以 ...