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

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. Python语言在企业级应用上的十大谬误

    英文原文:https://www.paypal-engineering.com/2014/12/10/10-myths-of-enterprise-python/ 翻译原文:http://www.os ...

  2. c#中实现登陆窗口（无需隐藏）

    C#登录窗口的实现,特点就是不用隐藏. 在入口处打开登陆: static void Main() { Application.EnableVisualStyles(); Application.Set ...

  3. Windows Serer 2003 配置手册 – 创建Active Dictionary域

    域与工作组的关系 实际上我们可以把域和工作组联系起来理解,在工作组上你一切的设置在本机上进行包括各种策略,用户登录也是登录在本机的,密码是放在本机的数据库来验证的.而如果你的计算机加入域的话,各种策略 ...

  4. DeviceIoControl方式 sys和exe通信

        常识: IRP:I/O Request Package  即输入输出请求包 exe和sys通信时,exe会发出I/O请求.操作系统会将I/O请求转化为相应的IRP数据, 不同类型传递到不同的d ...

  5. iOS学习之路十三（动态调整UITableViewCell的高度）

    大概你第一眼看来,动态调整高度是一件不容易的事情,而且打算解决它的第一个想法往往是不正确的.在这篇文章中我将展示如何使图表单元格的高度能根据里面文本内容来动态改变,同时又不必子类化UITableVie ...

  6. IOS学习之路七（通过xib自定义UITableViewCell）

    一.新建iOS Application工程,选择Single View Application,不要选中Use Storyboard.假设指定的是product name是:UITableViewCe ...

  7. window.parent与window.opener的区别

    有这样一个需求,弹出一个新窗口 并从该新页面的select选择框中选择需要的类别,再返回到之前的父窗口页面的某个文本框中.这里就要用到window.parent和window.opener 如题两种方 ...

  8. java生成PDF文件(itext)

    itextpdf-5.4.3.jar下载地址: http://www.kuaipan.cn/file/id_58980483773788178.htm 导入itextpdf-5.4.3.jar ToP ...

  9. javascript call()函数

    js中的call()函数,简单的说就是用来纠正指正的吧! 调用一个对象的方法,用另一个对象替换当前对象,这样说显得相当的空洞与抽象,实例说明一切! <script type="text ...

  10. web前端安全---读书笔记

    web前端安全---读书笔记 粗略的看完了Web前端黑客技术揭秘前两章了,由于自身的前端功力不深,当然也是初涉前端的安全问题,所以实话还是有些问题看不太明白的.在豆瓣看到的这本书,名字真心有点很肥主流 ...