php+jQuery+Ajax を使用して同様の効果を実現する方法を学びます

この記事の例では、同様の効果を達成するための php jQuery Ajax の方法について説明します。

データベース設計

まず2つのテーブルを用意します pic tableには、対応する名前を含む画像情報が保存されますpic_ip は、ユーザーが「いいね！」をクリックした後の IP データを記録します。

CREATE TABLE IF NOT EXISTS `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 DEFAULT '0',
 PRIMARY KEY (`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,
 PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8

index.php

index.phpでは、pic table内の画像情報をPHPで読み込み、CSSと組み合わせて表示し、ページを改善しています。ディスプレイ効果。

<?php
	 include_once("connect.php");
	 $sql = mysqli_query($link,"select * from pic");
	 while($row=mysqli_fetch_array($sql)){
		 $pic_id = $row[&#39;id&#39;];
		 $pic_name = $row[&#39;pic_name&#39;];
		 $pic_url = $row[&#39;pic_url&#39;];
		 $love = $row[&#39;love&#39;];
	 ?>
   	<li><img src="./images/<?php echo $pic_url;?>" alt="<?php echo $pic_name;?>"><p><a href="#" title="赞" class="img_on" rel="<?php echo $pic_id;?>"><?php echo $love;?></a></p></li>
    <?php }?>

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

.list{width:760px; margin:20px auto}
.list li{float:left; width:360px; height:280px; margin:10px; position:relative}
.list li p{position:absolute; top:0; left:0; width:360px; height:24px; line-height:24px;
background:#000; opacity:.8;filter:alpha(opacity=80);}
.list li p a{padding-left:30px; height:24px; background:url(images/heart.png) no-repeat
4px -1px;color:#fff; font-weight:bold; font-size:14px}
.list li p a:hover{background-position:4px -25px;text-decoration:none}

jQuery コード

ユーザーが気に入った画像上の赤いハートのボタンをクリックすると、Ajax リクエストがバックグラウンドの love.php に送信されます。応答が成功した場合、元のいくつかの値

$(function(){
 $("p a").click(function(){
  var love = $(this);
  var id = love.attr("rel"); //对应id
  love.fadeOut(300); //渐隐效果
  $.ajax({
   type:"POST",
   url:"love.php",
   data:"id="+id,
   cache:false, //不缓存此页面
   success:function(data){
    love.html(data);
    love.fadeIn(300); //渐显效果
   }
  });
  return false;
 });
});

love.php

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

1. 画像テーブル内の対応する画像愛フィールド値を更新し、値に 1 を加算します。
2. ユーザーが繰り返しクリックすることを防ぐために、ユーザーの IP 情報を pic_ip テーブルに書き込みます。
3. 更新されたいいねの値、つまり写真にいいねをしたユーザーの総数を取得し、その総数をフロントエンド ページに出力します。

include_once("connect.php");

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

$ip_sql=mysqli_query($link,"select ip from pic_ip where pic_id='$id' and ip='$ip'");
$count=mysqli_num_rows($ip_sql);
if($count==0){
	$sql = "update pic set love=love+1 where id='$id'";
	mysqli_query($link,$sql);
	$sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')";
	mysqli_query($link,$sql_in);
	$result = mysqli_query($link,"select love from pic where id='$id'");
	$row = mysqli_fetch_array($result);
	$love = $row['love'];
	echo $love;
}else{
	echo "赞过了..";
}

私がアップロードした添付ファイルのデータベース SQL では、UTF8 でエンコードされたテスト データベースを直接作成し、そこに SQL ファイルをインポートできます。 connect.php 内のデータベース接続情報を変更するだけです。

ソース ファイルはここをクリックしてこのサイトからダウンロードしてください。

概要:

実際には、たとえば製品に「いいね!」を希望するなど、Ajax リクエストを送信することを意味します。製品テーブルには count フィールドが必要です。このフィールド 1

にリクエストを送信します。成功すると、現在の番号が返されます。次にページを変更すると、

function Zan( goodsId, a ){
 $.post( "/goods/zan/"+goodsId, null,function( ret ){
   if( ret.status == 'ok' )
   $(a).html( ret.zannum);
   else
   alert( ret.data );
 },'json' );
}

関連学習の推奨事項: php プログラミング (ビデオ)

になります。

以上がphp+jQuery+Ajax を使用して同様の効果を実現する方法を学びますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。