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

この記事では、「いいね！」評価機能を実装するための 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"> < ;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

www.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/444603.html技術記事この記事では、ユーザーがページ上の気に入った画像の赤いハートのボタンをクリックすると、フロントエンド ページからバックエンドにメッセージが送信され、「いいね」評価機能を実装するための jQuery+Ajax+PHP コードを紹介します。 ...