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

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. C++反汇编与逆向分析技术揭秘

    C++反汇编-继承和多重继承   学无止尽,积土成山,积水成渊-<C++反汇编与逆向分析技术揭秘> 读书笔记 一.单类继承 在父类中声明为私有的成员,子类对象无法直接访问,但是在子类对象的 ...

  2. Moq & RhinoMocks

    Moq & RhinoMocks 使用Mock对象进行测试一般都会有以下三个关键步骤: 使用接口来描述需要测试的对象 为实际的产品代码实现这个接口 以测试为目的,在Mock对象中实现这个接口 ...

  3. JavaScript插件——标签页

    JavaScript插件——标签页 前言 阅读之前您也可以到Bootstrap3.0入门学习系列导航中进行查看http://www.cnblogs.com/aehyok/p/3404867.html ...

  4. 开始MVC5之旅

    ASP.NET MVC 5-开始MVC5之旅   本教程将使用Visual Studio 2013手把手教你构建一个入门的ASP.NET MVC5 Web应用程序.本教程配套的C#源码工程可通过如下网 ...

  5. Mac 下ll命令 command not found

    在linux下习惯使用ll.la.l等ls别名的童鞋到mac os提示command not found -461deMacBook-Pro:~ root# cd ~ -461deMacBook-Pr ...

  6. Dotfuscator注册码和XenoCode注册码

    .net加密工具注册码:Dotfuscator注册码如下:     Your   serial   number   is   14705     Your   Confirmation   Numb ...

  7. Bootstrap3入门

    Bootstrap3学习第一轮(入门) 前言 在上一节中http://www.cnblogs.com/aehyok/p/3381651.html主要是简单的介绍了一下Bootstrap.从http:/ ...

  8. DevExpress 学习使用之 LookUpEdit

    我的机器上,Winform 控件中的 LookUp 有1+3 种,在我们国家也被称为 4 种,你们那儿呢? 这 1+3 种 LookUpEdit 分别是 LookUpEdit.GridLookUpEd ...

  9. BroadcastReceiver基础总结

    BroadcastReceiver基础总结 BroadcastReceiver是Android四大组件之一,主要负责接收系统或其他程序发出的广播,在开发中,通常用做事件驱动的起源,比如开机就要开启一个 ...

  10. ibatis-Spring 整合

    这两天一直在研究ibatis与spring的整合 一个小小的demo搞的我头晕目眩的,但程序一旦跑起来了,突然有一种豁然开朗,重见天日,感觉生活很美好的感觉!,也许,这就是那一行行的代码带给我们的不同 ...