この記事では、「いいね！」評価機能を実装するための 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 と組み合わせてページの表示効果を向上させます。
| コードは次のとおりです | コードをコピー |
|
& 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>
|
CSS で、マウスが赤いハート ボタンに近づいたり遠ざかったりする動的な効果を定義し、ボタンを配置します。
| コードは次のとおりです | コードをコピーします |
.list{width:760px; margin:20px auto} | .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}
| jQuery コード
ユーザーが赤いハートのボタンをクリックしたときお気に入りの写真が表示されたら、バックグラウンドの 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.comtruehttp://www.bkjia.com/PHPjc/444603.html技術記事この記事では、ユーザーがページ上の気に入った画像の赤いハートのボタンをクリックすると、フロントエンド ページからバックエンドにメッセージが送信され、「いいね」評価機能を実装するための jQuery+Ajax+PHP コードを紹介します。 ...
