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

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. JS代码放在head和body中的区别分析

    最近一直在忙工作,没有时间来写博客了,不过今天做网站的时候碰到一个问题就是JS脚本存放的位置不同其效果不同.起初我没在意这个问题,后来一直解决不了,通过上网与查资料问同事,终于我明白了,原来我碰到了这 ...

  2. 流媒体：V4L2视频获取

    从深圳回来已经20多天了,除了完善毕业设计程序和论文,其他时间都去玩游戏了.真的是最后的一段时间能够无忧无虑在校园里挥霍自己的青春了.今天完成的答辩,比想象的要简单,一直以来想把我现在的这个流媒体的东 ...

  3. 网络tcp/ip资料

    1. Linux TCP/IP 协议栈分析,这是chinaunix.net论坛里的N人写的电子书,可以在这里下载PDF版本.http://blog.chinaunix.net/u2/85263/sho ...

  4. [转]Blocking Code Injection on iOS and OS X

    Source:http://www.samdmarshall.com/blog/blocking_code_injection_on_ios_and_os_x.html Yesterday I pos ...

  5. JavaScript 跨域方法总结

    同源策略 在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同源策略规定跨域之间的脚本是隔离的,一个域的脚 ...

  6. Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例

    Ubuntu13.04 Eclipse下编译安装Hadoop插件及使用小例 一.在Eclipse下编译安装Hadoop插件 Hadoop的Eclipse插件现在已经没有二进制版直接提供,只能自己编译. ...

  7. 网络爬虫的C++程序

    [搜片神器]之DHT网络爬虫的C++程序初步开源 回应大家的要求,特地整理了一开始自己整合的代码,这样最简单,最直接的可以分析流程,至于文章里面提供的程序界面更多,需要大家自己开发. 谢谢园子朋友的支 ...

  8. 实现了一个简单的key-value存储系统

    实现了一个简单的key-value存储系统 源码下载: kvfs.rar 正文: 所谓的Key-Value就是每次存储一个数据时,是根据Key进行索引存储的.为了实现Key的快速查找功能,我使用了B- ...

  9. Arduino 各种模块篇 光敏感应模块 light sensor

    It looks like this one: This one isn't a digital light sensor, so it's very simple. http://www.seeed ...

  10. Django入门实践（二）

    Django入门实践(二) Django模板简单实例 上篇中将html写在了views中,这种混合方式(指Template和views混在一起)不适合大型开发,而且代码不易管理和维护,下面就用Djan ...