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）;
$.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)
})
});次のセクション
データを取得 ("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>
なし