學習筆記2(投票)

ajax.php

<?php

include_once("connect.php");

$action = $_GET['action'];
$id = 1;
$ip = get_client_ip();

if ($action == 'like') {
    likes(1, $id, $ip);
} elseif ($action == 'unlike') {
    likes(0, $id, $ip);

} else {
    echo jsons($id);
}

function likes($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);

        echo jsons($id);
    } else {
        $msg = $type == 1 ? '您已經頂過了' : '您已經踩過了';
        $arr['success'] = 0;
        $arr['msg'] = $msg;
        echo json_encode($arr);
    }
}

function jsons($id) {
    $query = mysql_query("select * from votes where id=" . $id);
    $row = mysql_fetch_array($query);
    $like = $row['likes'];
    $unlike = $row['unlikes'];
    $arr['success'] = 1;
    $arr['like'] = $like;
    $arr['unlike'] = $unlike;
    $like_percent = round($like / ($like + $unlike), 3) * 100;
    $arr['like_percent'] = $like_percent . '%';
    $arr['unlike_percent'] = (100 - $like_percent) . '%';

    return json_encode($arr);
}

//獲取用戶真實IP
function get_client_ip() {
    if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))
        $ip = getenv("HTTP_CLIENT_IP");
    else
    if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))
        $ip = getenv("HTTP_X_FORWARDED_FOR");
    else
    if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))
        $ip = getenv("REMOTE_ADDR");
    else
    if (isset($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
        $ip = $_SERVER['REMOTE_ADDR'];
    else
        $ip = "unknown";
    return ($ip);
}

?>

配置文件

<?php
//數據庫配置
$host="localhost";
$db_user="root";//用戶名
$db_pass="123456";//密碼
$db_name="xjy";//數據庫名
$timezone="Asia/Shanghai";

$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");

header("Content-Type: text/html; charset=utf-8");
?>

index.php

<?php
//bao han jiao ben wen jian
include_once("connect.php");
//cong mysql qu data bing qie chu li
$query=mysql_query("select likes,unlikes from votes where id = 1");
$row = mysql_fetch_array($query);

$like = $row['likes'];
$unlike = $row['unlikes'];

$percent_like = round($like / ($like + $unlike), 3) * 100;
$percent_unlike = 100 - $percent_like;

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head> 
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：PHP+MySql+jQuery實現頂和踩投票功能</title>
        <meta name="keywords" content="PHP投票,jquery投票" />
        <meta name="description" content="本文結合實例，講解使用PHP+MySql+jQuery實現的“頂”和“踩”投票功能，通過記錄用戶IP，判斷用戶的投票行爲是否有效，該實例也可以擴展到投票系統中。" />
        <link rel="stylesheet" type="text/css" href="http://www.sucaihuo.com/jquery/css/common.css" />
        <style type="text/css">
            .digg{width:420px; height:120px; margin:80px auto 20px auto; position:relative}
            #dig_up,#dig_down{width:200px; height:48px; margin:10px; position:relative; border:1px solid #d3d3d3; padding-left:42px; cursor:pointer}
            .digup{background:url(images/diggs.png) no-repeat 4px 2px;}
            .digup_on{background:url(images/diggs.png) no-repeat 4px -49px;}
            .digdown{background:url(images/diggs.png) no-repeat 4px -102px;}
            .digdown_on{background:url(images/diggs.png) no-repeat 4px -154px;}
            #num_up,#num_down{position:absolute; right:6px; top:18px; font-size:20px;}
            #dig_up p{height:24px; line-height:24px; color:#360}
            #dig_down p{height:24px; line-height:24px; color:#f30}
            .bar{width:100px; height:12px; line-height:12px; border:1px solid #f0f0f0; position:relative; text-align:center}
            .bar span{display:block; height:12px; }
            .bar i{position:absolute; top:0; left:104px;}
            #bar_up span{background:#360}
            #bar_down span{background:#f60}
            #msg{position:absolute; right:20px; top:40px; font-size:18px; color:#f00}
        </style>

    </head>
    <body>
        <div class="head">
            <div class="head_inner clearfix">
                <ul id="nav">
                    <li><a href="http://www.sucaihuo.com">首 頁</a></li>
                    <li><a href="http://www.sucaihuo.com/templates">網站模板</a></li>
                    <li><a href="http://www.sucaihuo.com/js">網頁特效</a></li>
                    <li><a href="http://www.sucaihuo.com/php">PHP</a></li>
                    <li><a href="http://www.sucaihuo.com/site">精選網址</a></li>
                </ul>
                <a class="logo" href="http://www.sucaihuo.com"><img src="http://www.sucaihuo.com/Public/images/logo.jpg" alt="素材火logo" /></a>
            </div>
        </div>
        <div class="container">
            <div class="demo">
                <h2 class="title"><a href="http://www.sucaihuo.com/js/105.html">教程：PHP+MySql+jQuery實現頂和踩投票功能</a></h2>
                <div class="digg"> 
                    <div id="dig_up" class="digup">
                        <span id="num_up"><?php echo $like;?></span>
                        <p>很好，很強大！</p>
                        <div id="bar_up" class="bar"><span style="width:<?php echo $percent_like;?>%"></span><i><?php echo $percent_like;?>%</i></div>
                    </div>
                    <div id="dig_down" class="digdown">
                        <span id="num_down"><?php echo $unlike;?></span>
                        <p>太差勁了！</p>
                        <div id="bar_down" class="bar"><span style="width:<?php echo $percent_unlike;?>%"></span><i><?php echo $percent_unlike;?>%</i></div>
                    </div>
                    <div id="msg"></div>
                </div>
            </div>
        </div>
        <div class="foot">
            Powered by sucaihuo.com  本站皆爲作者原創，轉載請註明原文鏈接：<a href="http://www.sucaihuo.com" target="_blank">www.sucaihuo.com</a>
        </div>
        <script type="text/javascript" src="http://www.sucaihuo.com/Public/js/other/jquery.js"></script> 
        <script type="text/javascript">
            $(function() {//??i cant understand
                $("#dig_up").hover(function() {
                    $(this).addClass("digup_on");
                }, function() {
                    $(this).removeClass("digup_on");
                });
                $("#dig_down").hover(function() {
                    $(this).addClass("digdown_on");
                }, function() {
                    $(this).removeClass("digdown_on");
                });

                getdata("ajax.php", 1);

                $("#dig_up").click(function() {
                    getdata("ajax.php?action=like", 1);
                });

                $("#dig_down").click(function() {
                    getdata("ajax.php?action=unlike", 1);
                });
            });

            function getdata(url, sid) {
                $.getJSON(url, {id: sid}, function(data) {
                    if (data.success == 1) {
                        $("#num_up").html(data.like);
                        $("#bar_up span").css("width", data.like_percent);
                        $("#bar_up i").html(data.like_percent);
                        $("#num_down").html(data.unlike);
                        $("#bar_down span").css("width", data.unlike_percent);
                        $("#bar_down i").html(data.unlike_percent);
                    } else {
                        $("#msg").html(data.msg).show().css({'opacity': 1, 'top': '40px'}).animate({top: '-50px', opacity: 0}, "slow");
                    }
                });
            }
        </script>
    </body>
</html>

圖片:未上傳
1需要自己建表否則功能不可用
2link鏈接一個外部CSS文件

BEST-CDB

發佈了57 篇原創文章 · 獲贊 0 · 訪問量 2萬+

私信關注

學習筆記2(投票)

SQL優化-20231016

使用經驗5

學習筆記1(將訪問記錄寫入到列表並且顯示在瀏覽器)

AI五子棋

學習筆記n

QT學習筆記(實現登錄註冊界面)

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結