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

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. Java泛型学习笔记--Java泛型和C#泛型比较学习（一）

    总结Java的泛型前,先简单的介绍下C#的泛型,通过对比,比较学习Java泛型的目的和设计意图.C#泛型是C#语言2.0和通用语言运行时(CLR)同时支持的一个特性(这一点是导致C#泛型和Java泛型 ...

  2. Push Notification总结系列（一）

    Notification系列概括: 1.Push Notification简介和证书说明及生成配置 2.Push Notification的iOS处理代码和Provider详解 3.Push Noti ...

  3. Asp.net MVC4 CodeFirst 使用EFTracingProvider

    一.关于EFTracingProvider EFTracingProvider相关信息见作者博客:关于EFTracingProvider EFTracingProvider Demo下载地址:Trac ...

  4. .net mvc页面UI之Jquery博客日历控件

    摘要:最近在做一个博客系统,其他需要用到博客日历控件,网上搜索了很多资料,其中大部分都是javascript的,经过总结使用jquery实现了博客日历效果.代码如下: 原文链接转载请注明:http:/ ...

  5. network重启失败原因

    /etc/sysconfig/network-scripts/ifcfg-eth0   DEVICE='eth0'  eth0后面千万不能加空格之类的  

  6. Linux kill, killall, kill -9

    tyle="margin: 20px 0px 0px; font-size: 14px; line-height: 26px; font-family: Arial;"> 附 ...

  7. C# 根据路线点集合动态分段

    /// <summary>         /// 将数据根据起.止点分段,返回结果点集合         /// </summary>         public Obse ...

  8. 交流希望希望能得到一些大神的指点，加QQ群：249627436 java技术交流群

    查了好多资料,发现还是不全,干脆自己整理吧,至少保证在我的做法正确的,以免误导读者,也是给自己做个记录吧! 本人学习java,1年多,对一些基本技巧已掌握.为了使自己能力晋升建了一个QQ群:java交 ...

  9. 8259A工作原理描述

    通过初始化编程向8259A写入相应的初始化命令ICW,可以使芯片处于一个规定的基本工作方式,并在此方式下进行工作.8259A的初始化命令字共有4个ICW1-ICW4,进行初始化时要求ICW1-ICW4 ...

  10. Swift3.0服务端开发(三) Mustache页面模板与日志记录

    本篇博客主要介绍如果在Perfect工程中引入和使用Mustache页面模板与日志记录系统.Mustache页面模板类似于PHP中的smarty模板引擎或者Java中的JSTL标签.当然Mustach ...