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);
    }); #o# .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