PHP jQuery Ajax와 같은 효과를 얻는 방법(소스 코드 다운로드 포함)_php 기술

이 기사의 예에서는 유사한 효과를 얻기 위해 PHP jQuery Ajax를 사용하는 방법을 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.

데이터베이스 디자인

먼저 두 개의 테이블을 준비합니다. 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와 결합하여 페이지 표시 효과를 향상시켰습니다.

<&#63;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'];
   &#63;>
   <li><img src="images/<&#63;php echo $pic_url;&#63;>" alt="<&#63;php echo $pic_name;&#63;>"><p><a href="#"
title="赞"class="img_on" rel="<&#63;php echo $pic_id;&#63;>"><&#63;php echo $love;&#63;></a></p></li>
<&#63;php }&#63;>

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(); //获取用户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' );
}

이 글이 PHP 프로그래밍에 종사하는 모든 분들께 도움이 되기를 바랍니다.