PHP 개발 빨간색과 파란색 투표 기능 튜토리얼 jQuery
손 버튼을 클릭하면 jQuery의 $.getJSON()을 사용하여 Ajax 요청을 백그라운드 PHP로 보냅니다. 요청이 성공하면 백그라운드에서 반환된 json 데이터를 가져오고 jQuery는 json 데이터를 처리합니다. . 다음 함수: getdata(url,sid)는 두 개의 매개변수를 전달합니다. URL은 요청의 백엔드 PHP 주소이고 sid는 현재 투표 주제 ID를 나타냅니다. 이 함수에서 반환된 json 데이터에는 두 빨간색 모두의 투표 수가 포함됩니다. 파란색 정당과 양 정당의 비율을 기준으로 비율 막대의 너비를 계산하고 비동기적으로 대화식으로 투표 효과를 표시합니다.
function getdata(url,sid){
$.getJSON(url,{id:sid},function(data){
if(data.success==1){
var w = 208; //정의 비율 막대의 전체 너비
using using using through 사용 through out through out through out through out through out through''s' ‐‐‐ ‐‐‐‐ 바의 전체 너비로 이어집니다
") ;
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; //정의 비율 막대의 전체 너비
using using using through 사용 through out through out through out through out through out through''s' ‐‐‐ ‐‐‐‐ 바의 전체 너비로 이어집니다
") ;
var red_bar_w = w*data.red_percent-10; //파란색 투표 수
("#blue_num").html(data.blue)
> ("#blue_num").html(data.blue);
}
})
}
페이지가 처음 로딩되면 getdata()를 호출한 후 클릭하여 레드팀에 투표하거나 블루팀에 투표하여 getdata()도 호출하는데 전달되는 매개변수가 다릅니다. 이 예시에서는 sid 매개변수가 1로 설정되어 있으며, 이는 데이터 테이블의 id를 기준으로 설정됩니다. 개발자는 실제 프로젝트를 기준으로 정확한 id를 읽을 수 있습니다.
<!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>
없음