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

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. Socket一些常用的方法封装

    public class SocketHelper { /// <summary> /// 功能描述:得到一个实例对象 /// </summary> /// <retur ...

  2. ASP.NET WebForm 的路由

    ASP.NET WebForm 的路由 偷会闲, 看看博客园, 有筒子写了篇: ASP.NET的路由 我翻了翻两前的一份邮件, 是我当时在项目之余的时间研究的,那时还没用MVC,所有项目都是 WebF ...

  3. macvim打造python IDE

    昨天安装了macvim,今天在上面配置了一下python的ide: 大家也可参考http://blog.dispatched.ch/2009/05/24/vim-as-python-ide/ 1.文法 ...

  4. centos安装svn

    原文链接:http://blog.csdn.net/liuyuan_jq/article/details/2110814 1.SVN简介由于前些年在版本的管理上采用的都是CVS系统,总体上而言还是很优 ...

  5. python文件的中文处理以及个人思路

    环境:ubuntu12.04 python2.7  涉及:ascii,utf-8,gbk,gb2312 首先说下个人处理过程中遇到的问题: 任务是这样:有大概4000个txt,将他们合并到一个文件里, ...

  6. Caffe Ubuntu14.04 64位 的最快安装 （cuda7.5 + cudnn7.0 2016最新）

    最近因为各种原因,装过不少次Caffe,安装过程很多坑,为节省新手的时间,特此总结整个安装流程. 关于Ubuntu 版本的选择,建议用14.04这个比较稳定的版本,但是千万不要用麒麟版!!!比原版体验 ...

  7. Quagga添加自己的命令

    参考了王斌的文档:http://down.51cto.com/data/621454 TIP:笔者使用的版本是0.99.20 需求:在接口模式下添加一条"ip ospf enable&quo ...

  8. 黑马程序员：Java基础总结----GUI图形化界面

    黑马程序员:Java基础总结 GUI图形化界面   ASP.Net+Android+IO开发 . .Net培训 .期待与您交流!   GUI(Graphical User Interface)图形化界 ...

  9. JBPM之JPdl小叙

    JPdl:jbpm流程定义文件,下面是一个简单的流程定义文件: <?xml version="1.0" encoding="UTF-8"?> < ...

  10. javaPNS进阶-高级推送技巧

    1 创建 payloads javaPNS提供了很多简单易用的通知方式(Push类里的alert,badges,sounds等)这些让你不用自己处理payload.但是我们的程序可能需要复杂的推送信息 ...