php+jQuery+Ajax를 사용하여 유사한 효과를 얻는 방법 알아보기

이 기사의 예에서는 php+jQuery+Ajax를 사용하여 유사한 효과를 얻는 방법을 설명합니다. 참고를 위해 모든 사람과 공유하세요.

데이터베이스 디자인

먼저 두 개의 테이블을 준비합니다. 그림 테이블에는 해당 그림의 이름, 경로 및 총 "좋아요" 수를 포함한 그림 정보가 저장됩니다. 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 테이블의 이미지 정보를 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 code

사용자가 마음에 드는 사진에 빨간색 하트 버튼을 클릭하면 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. 이미지 테이블에서 해당 이미지 love 필드 값을 업데이트하고 값에 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 요청을 보내는 것입니다. 예를 들어 제품에 좋아요를 표시하고 싶습니다. 제품 테이블에는 개수 필드가 있어야 합니다. 이 필드에 +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 중국어 웹사이트의 기타 관련 기사를 참조하세요!