PHP开发红蓝两方投票功能教程之jQuery

当点击手型按钮时，利用jQuery的$.getJSON()向后台php发送Ajax请求，如果请求成功，将会得到后台返回的json数据，jQuery再将json数据进行处理。以下函数：getdata(url,sid)，传递了两个参数，url是请求的后台php地址，sid表示当前投票主题ID，我们在该函数中，返回的json数据有红蓝双方的投票数，以及双方比例，根据比例计算比例条的宽度，异步交互展示投票效果。

当页面初次加载时，即调用getdata()，然后点击给红方投票或给蓝方投票同样调用getdata()，只是传递的参数不一样。注意本例中的参数sid我们设置为1，是根据数据表中的id设定的，开发者可以根据实际项目读取准确的id。

$(function(){
    //获取初始数据
    getdata("vote.php",1);
    //红方投票
    $(".redhand").click(function(){
        getdata("vote.php?action=red",1);
    });
    //蓝方投票
    $(".bluehand").click(function(){
        getdata("vote.php?action=blue",1);
    });
});

新建文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>红蓝投票功能</title>

 <style>
 #main{
 width: 600px;
 margin: 0 auto;
 border: 1px solid #050205;
 }
 .vote{
 width:358px;
 height:300px;
 margin:40px auto;
 position:relative
 }
 .votetitle{
 width:100%;
 height:62px;
 background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat 0 30px;
 font-size:15px
 }
 .red{
 position:absolute;
 left:0; top:64px;
 height:80px;
 }
 .blue{position:absolute;
 right:0;
 top:64px;
 height:80px;
 }
 .red p,.blue p{
 line-height:22px
 }
 .redhand{
 position:absolute;
 left:0;
 width:36px;
 height:36px;
 background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -1px -38px;
 cursor:pointer
 }
 .bluehand{
 position:absolute;
 right:0;
 width:36px;
 height:36px;
 background:url(https://img.php.cn/upload/course/000/000/006/58297eff1276a354.png) no-repeat -41px -38px;
 cursor:pointer
 }
 .redbar{
 position:absolute;
 left:42px;
 margin-top:8px;
 }
 .bluebar{
 position:absolute;
 right:42px;
 margin-top:8px;
 }
 .redbar span{
 display:block;
 height:6px;
 background:red;
 width:100%;
 border-radius:4px;
 }
 .bluebar span{
 display:block;
 height:6px;
 background: blue;
 width:100%;
 border-radius:4px;
 position:absolute;
 }
 .redbar p{
 line-height:20px;
 color:red;
 }
 .bluebar p{
 line-height:20px;
 color:#09f;
 text-align:right;
 margin-top:23px
 }
 </style>
 <script src="//cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
 <script type="text/javascript">
 $(function(){
 getdata("vote.php",1);

 $(".redhand").click(function(){
 getdata("vote.php?action=red",1);
 });
 $(".bluehand").click(function(){
 getdata("vote.php?action=blue",1);
 });
 });

 function getdata(url,sid){
 $.getJSON(url,{id:sid},function(data){
 if(data.success==1){
 var w = 208;
 $("#red_num").html(data.red);
 $("#red").css("width",data.red_percent*100+"%");
 var red_bar_w = w*data.red_percent-10;
 $("#red_bar").css("width",red_bar_w);
 $("#blue_num").html(data.blue);
 $("#blue").css("width",data.blue_percent*100+"%");
 var blue_bar_w = w*data.blue_percent;
 $("#blue_bar").css("width",blue_bar_w);

 }else{
 alert(data.msg);
 }
 });
 }
 </script>

</head>


<body>
<div id="main">

 <h2>PHP+jQuery+MySql实现红蓝投票功能</h2>
 <hr/>

 <div class="vote">
 <div class="votetitle">您对PHP中文网提供的文章的看法？</div>
 <div class="red" id="red">
 <p id="hong">非常实用</p>
 <div class="redhand"></div>
 <div class="redbar" id="red_bar">
 <span></span>
 <p id="red_num"></p>
 </div>
 </div>
 <div class="blue" id="blue">

 <p id="bu">完全看不懂</p>
 <div class="bluehand"></div>
 <div class="bluebar" id="blue_bar">
 <span></span>
 <p id="blue_num"></p>
 </div>
 </div>
 </div>
</div>


</body>
</html>

提交重置代码

自动运行

全屏

PHP开发 红蓝两方投票功能教程之jQuery

PHP开发红蓝两方投票功能教程之jQuery