PHP는 jQuery의 ajax 비새로고침 제출을 결합하여 like 함수를 구현합니다.

이 글은 주로 jQuery의 ajax non-refresh submit과 결합하여 like 기능을 구현하는 방법을 소개합니다. 관심 있는 친구들이 참고하면 좋겠습니다.

데이터베이스 디자인

먼저 두 개의 테이블을 준비합니다. pic 테이블은 사용자가 좋아요를 클릭한 후 사진의 이름, 경로 및 총 "좋아요" 수를 포함한 사진 정보를 저장합니다. .

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 = mysql_query("select * from pic");
   while($row=mysql_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(); //获取用户IP
$id = $_POST['id'];
if(!isset($id) || empty($id)) exit;
$ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'");
$count=mysql_num_rows($ip_sql);
if($count==0){ //如果没有记录
  $sql = "update pic set love=love+1 where id='$id'"; //更新数据
  mysql_query( $sql);
  $sql_in = "insert into pic_ip (pic_id,ip) values ('$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 "赞过了..";
}

제가 업로드한 첨부파일의 데이터베이스 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' );
}

Summary가 됩니다. 위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다.

관련 권장 사항: PHP의 openssl 암호화 확장 사용 요약

위 내용은 PHP는 jQuery의 ajax 비새로고침 제출을 결합하여 like 함수를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!