jQuery+Ajax+PHP で「いいね」評価関数を実装 code_PHP チュートリアル-PHPチュートリアル-php.cn

jQuery+Ajax+PHP で「いいね」評価関数を実装 code_PHP チュートリアル

WBOY

リリース： 2016-07-20 11:11:57

オリジナル

794 人が閲覧しました

この記事では、「いいね！」評価機能を実装するための jQuery+Ajax+PHP コードを紹介します。ユーザーがページ上で気に入った画像の赤いハートのボタンをクリックすると、フロントエンドページから ajax リクエストが送信されます。バックグラウンド PHP プログラムがリクエストを受信した後、IP ライブラリにユーザーのクリックレコードが存在するかどうかを確認し、存在しない場合は、対応する値を 1 加えて、ユーザーの IP 情報を IP ライブラリに書き込みます。ユーザーには「いいね」したことが伝えられます。

データベース設計

まず、pic テーブルには、写真に対応する写真の名前、パス、「いいね！」の総数を含む写真情報が保存され、ユーザーが「いいね！」をクリックした後の IP データが記録されます。

存在しない場合はテーブルを作成 `pic` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`pic_name` varchar(60) NOT NULL,
`pic_url` varchar(60) NOT NULL,
`love ` int (11) NOT NULL デフォルト '0',
主キー (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

CREATE TABLE IF NOT EXISTS `pic_ip` (
`id` int(11) NOT NULL AUTO_INCREMENT 、
`pic_id` int(11) NOT NULL、
`ip` varchar(40) NOT NULL、
主キー (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8

index.php

In Index.php では、PHP を使用して pic table 内の画像情報を読み取って表示し、CSS と組み合わせてページの表示効果を向上させます。

CSS で、マウスが赤いハートボタンに近づいたり遠ざかったりする動的な効果を定義し、ボタンを配置します。

コードは次のとおりです

コードをコピー

& lt; me ta name= "keywords" content="jquery">

jQuery+Ajax+PHP は「いいね」評価を実装します
< ;link rel ="stylesheet" type="text/css" href="../css/main.css" />

< ?php
include_once("connect.php");
$sql = mysql_query("select * from pic");
while($row=mysql_fetch_array($sql)){
$pic_id = $row[' id'] ;
$pic_name = $row['pic_name'];
$pic_url = $row['pic_url'];
$love = $row['love'];
?>

< ;img src ="images/" alt="">
< /li>

.list{width:760px; margin:20px auto} jQuery コード

コードは次のとおりです	コードをコピーします
.list li{float:left; height:280px;ピクセル; 位置: 相対値; 位置: 絶対値: 0; 幅: 24px; 不透明度: 000; :alpha(opacity =80);} .list li p a{padding-left:30px; height:24px; 背景:url(images/heart.png) no-repeat 4px -1px;color:#fff; Weight:bold ; font-size:14px} .list li p a:hover{background-position:4px -25px;text-decoration:none}

ユーザーが赤いハートのボタンをクリックしたときお気に入りの写真が表示されたら、バックグラウンドの love.php に ajax リクエストを送信します。リクエストの応答が成功すると、元の値が更新されます。 var id = love .attr（ "rel"）; .html (データ);

love.fadein (300);

love.php

バックグラウンドの love.php は、フロントエンドから ajax リクエストを受け取り、送信された画像 ID 値に基づいて、IP テーブルにユーザーの IP のクリック記録があるかどうかを確認します。ユーザーが「いいね」した場合は、次の操作を実行します:

1. 画像テーブル内の対応する画像愛フィールドの値を更新し、その値に 1 を加えます。

2. ユーザーが繰り返しクリックすることを防ぐために、ユーザーの IP 情報を pic_ip テーブルに書き込みます。

3. 写真を気に入ったユーザーの合計数である更新された愛の値を取得し、その合計をフロントエンドページに出力します。

コードは次のとおりです

コードをコピー

$host="localhost";
$db_user="root";
$db_pass="";
$db_name="デモ";
$timezone="アジア/上海";

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

include_once("connect.php");

$ip = get_client_ip();
$id = $_POST['id'];
if(!isset ($id ) || empty($id)) exit;

$ip_sql=mysql_query("pic_id='$id' および ip='$ip' の pic_ip から ip を選択します");
$count=mysql_num_rows($ ip_sql);
if($count==0){
$sql = "写真セット love=love+1 where id='$id'";
mysql_query( $sql);
$sql_in = "pic_ip に挿入(pic_id, ip) 値 ('$id','$ip')";
mysql_query( $sql_in);
$result = mysql_query("select love from pic where id='$id'");
$row = mysql_fetch_array( $result);
$love = $row['love'];
echo $love;
}else{
echo "いいね！";
}

// ユーザーのリアルを取得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 "）、" nownd "））
$ ip = getEnv（" http_x_forwarded_for "）; "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);
}
?>

get_client_ip()コード内の関数はユーザーの実際の IP を取得するために使用されます

http://www.bkjia.com/PHPjc/444603.html