PHP開発の赤と青の投票関数チュートリアルjQuery

ハンドボタンをクリックすると、jQueryの$.getJSON()を使用してバックグラウンドphpにAjaxリクエストが送信され、リクエストが成功するとバックグラウンドから返されたjsonデータが取得され、jQueryがそのjsonデータを処理します。。次の関数: getdata(url,sid) は 2 つのパラメーターを渡します。URL はリクエストのバックエンド PHP アドレスであり、sid は現在の投票トピック ID を表します。この関数では、返される JSON データには両方の投票数が含まれます。青の政党と両党の比率は、比率に基づいて比例バーの幅を計算し、非同期でインタラクティブに投票効果を表示します。

function getdata(url,sid){
$.getJSON(url,{id:sid},function(data){
if(data.success==1){
var w = 208; //比率ストリップの合計幅
$ ("#red_num"). Html ("#red"); CSS ("width", data.red_percent*100+) "%"% "%"% "%"% "% ");
var red_bar_w = w*data.red_percent-10; //青色の投票数
( "#blue_num").html(data.blue); （#blue_num "）。html（data.blue）;

初めてページが読み込まれるとき、getdata() が呼び出され、その後、クリックして赤のチームに投票するか、青のチームに投票して getdata() も呼び出しますが、渡されるパラメーターは異なります。この例のパラメーター sid は 1 に設定されており、開発者は実際のプロジェクトに基づいて正確な ID を読み取ることができます。

$(function(){
データを取得 ("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>

提出するリセットコード

自動運転

前のセクション次のセクション

チュートリアルリスト

ヘルプの取得