コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > PHP と jQuery を組み合わせて、赤と青の投票関数を実装しました。

PHP と jQuery を組み合わせて、赤と青の投票関数を実装しました。

WBOY
リリース： 2016-05-16 15:49:33
オリジナル
1402 人が閲覧しました

これは、二者間の視点による投票シナリオに適用された、非常に実用的な投票の例です。ユーザーは、自分の意見を代表する政党に投票することを選択できます。この記事では、フロントエンドとバックエンドのインタラクションを通じて、赤党と青党の投票を例として、投票数と割合を直感的に表示します。赤と青のパーティーで広く使用されています。

この記事は総合的な知識を応用した記事であり、PHP、jQuery、MySQL、html、css の基本的な知識が必要です。この記事は、「PHP MySql jQuery で実装された「いいね」と「嫌い」の投票機能」の記事をベースに適切な改良を加えたものであり、データ テーブルを共有しています。最初にこの記事について学ぶためにクリックしてください。

HTML

ページ上に赤と青の政党の見解、対応する投票数と割合、および投票インタラクションのための手の写真を表示する必要があります。この例では、#red と #blue は、それぞれ赤と青のパーティー。 .redhand と .bluehand は手の形の投票ボタンを作成するために使用され、.redbar と .bluebar は赤と青の割合を示し、#red_num と #blue_num は両党の投票数を示します。 

 
<div class="vote"> 
  <div class="votetitle">您对脚本之家提供的文章的看法？</div> 
  <div class="votetxt">非常实用<span>完全看不懂</span></div> 
  <div class="red" id="red"> 
    <div class="redhand"></div> 
    <div class="redbar" id="red_bar"> 
      <span></span> 
      <p id="red_num"></p> 
    </div> 
  </div> 
  <div class="blue" id="blue"> 
    <div class="bluehand"></div> 
    <div class="bluebar" id="blue_bar"> 
      <span></span> 
      <p id="blue_num"></p> 
    </div> 
  </div> 
</div>
ログイン後にコピー

CSS

CSS を使用して、ページの美化、背景画像の読み込み、相対位置の決定などを行います。次のコードを直接コピーして、独自のプロジェクトにわずかな変更を加えることができます。 

 
.vote{width:288px; height:220px; margin:60px auto 20px auto;position:relative} 
.votetitle{width:100%;height:62px; background:url(icon.png) no-repeat 0 30px; font-size:15px} 
.red{position:absolute; left:0; top:90px; height:80px;} 
.blue{position:absolute; right:0; top:90px; height:80px;} 
.votetxt{line-height:24px} 
.votetxt span{float:right} 
.redhand{position:absolute; left:0;width:36px; height:36px; background:url(icon.png) no-repeat -1px -38px;cursor:pointer} 
.bluehand{position:absolute; right:0;width:36px; height:36px; background:url(icon.png) no-repeat -41px -38px;cursor:pointer} 
.grayhand{width:34px; height:34px; background:url(icon.png) no-repeat -83px -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:#09f; width:100%;border-radius:4px; position:absolute; right:0} 
.redbar p{line-height:20px; color:red;} 
.bluebar p{line-height:20px; color:#09f; text-align:right; margin-top:6px}
ログイン後にコピー

jQuery

手のボタンがクリックされると、jQuery の $.getJSON() を使用して Ajax リクエストがバックグラウンド php に送信されます。リクエストが成功すると、バックグラウンドから返された 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(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); 
    } 
  }); 
}
ログイン後にコピー

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

 
$(function(){ 
  //获取初始数据 
  getdata("vote.php",1); 
  //红方投票 
  $(".redhand").click(function(){ 
    getdata("vote.php&#63;action=red",1); 
  }); 
  //蓝方投票 
  $(".bluehand").click(function(){ 
    getdata("vote.php&#63;action=blue",1); 
  }); 
});
ログイン後にコピー

PHP

フロントエンドはバックグラウンドで vote.php をリクエストし、vote.php はデータベースに接続し、受け取ったパラメータに基づいて関連関数を呼び出します。 

 
include_once("connect.php"); 
 
$action = $_GET['action']; 
$id = intval($_GET['id']); 
$ip = get_client_ip();//获取ip 
 
if($action=='red'){//红方投票 
  vote(1,$id,$ip); 
}elseif($action=='blue'){//蓝方投票 
  vote(0,$id,$ip); 
}else{//默认返回初始数据 
  echo jsons($id); 
}
ログイン後にコピー

関数 vote($type,$id,$ip) は投票アクションを行うために使用されます。$type は投票者を表し、$id は投票トピックの ID を表し、$ip はユーザーの現在の IP を表します。まず、ユーザーの現在の IP に基づいて、現在の IP レコードが投票レコード テーブル votes_ip に存在するかどうかを照会します。存在する場合は、ユーザーが投票したことを意味します。それ以外の場合は、赤側または青側の投票数を更新します。側で、現在のユーザー投票レコードを votes_ip テーブルに書き込み、投票が繰り返されるのを防ぎます。 

 
function vote($type,$id,$ip){ 
  $ip_sql=mysql_query("select ip from votes_ip where vid='$id' and ip='$ip'"); 
  $count=mysql_num_rows($ip_sql); 
  if($count==0){//还没有投票 
    if($type==1){//红方 
      $sql = "update votes set likes=likes+1 where id=".$id; 
    }else{//蓝方 
      $sql = "update votes set unlikes=unlikes+1 where id=".$id; 
    } 
    mysql_query($sql); 
     
    $sql_in = "insert into votes_ip (vid,ip) values ('$id','$ip')"; 
    mysql_query($sql_in); 
    if(mysql_insert_id()>0){ 
      echo jsons($id); 
    }else{ 
      $arr['success'] = 0; 
      $arr['msg'] = '操作失败，请重试'; 
      echo json_encode($arr); 
    } 
  }else{ 
    $arr['success'] = 0; 
    $arr['msg'] = '已经投票过了'; 
    echo json_encode($arr); 
  } 
}
ログイン後にコピー

関数 jsons($id) は、現在の ID の投票数をクエリし、割合を計算して、フロントエンド呼び出しの JSON データ形式を返します。 

 
function jsons($id){ 
  $query = mysql_query("select * from votes where id=".$id); 
  $row = mysql_fetch_array($query); 
  $red = $row['likes']; 
  $blue = $row['unlikes']; 
  $arr['success']=1; 
  $arr['red'] = $red; 
  $arr['blue'] = $blue; 
  $red_percent = round($red/($red+$blue),3); 
  $arr['red_percent'] = $red_percent; 
  $arr['blue_percent'] = 1-$red_percent; 
   
  return json_encode($arr); 
}
ログイン後にコピー

この記事には、ユーザーの実際の IP を取得する関数 get_client_ip() も含まれています。ここをクリックして関連コードを参照してください: http://www.jb51.net/article/38940.htm

MySQL

最後に、Mysql データ テーブルを貼り付けます。votes テーブルは赤党と青党の両方からの投票総数を記録するために使用され、votes_ip テーブルはユーザーの投票 IP レコードを保存するために使用されます。 

CREATE TABLE IF NOT EXISTS `votes` ( 
 `id` int(10) NOT NULL AUTO_INCREMENT, 
 `likes` int(10) NOT NULL DEFAULT '0', 
 `unlikes` int(10) NOT NULL DEFAULT '0', 
 PRIMARY KEY (`id`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8; 
 
 
INSERT INTO `votes` (`id`, `likes`, `unlikes`) VALUES 
(1, 30, 10); 
 
CREATE TABLE IF NOT EXISTS `votes_ip` ( 
 `id` int(10) NOT NULL, 
 `vid` int(10) NOT NULL, 
 `ip` varchar(40) NOT NULL 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;
ログイン後にコピー

ダウンロードしたデモが実行できない場合は、まずデータベース接続構成が正しいかどうかを確認してください。さて、一言言うのはやめて、投票に来てください:

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。

関連ラベル：
jquery投票 jquery投票插件 php投票程序
ソース：php.cn
前の記事：jquery は、小さな画像の上でマウスをスライドさせて大きな画像を表示するメソッドを実装します_jquery 次の記事：jQuery.outerWidth() function_jquery の具体的な使用方法の詳細な紹介
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2042
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2201
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1858
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1745
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1766
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート