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

php+jQuery+Ajax で同様の効果を実現する方法、

例の形式で、php と jQuery の ajax 非リフレッシュ送信を組み合わせて同様の機能を実装する具体的な手順と関連テクニックを詳細に紹介します。

困っている友達は参考にしてください

php+jQuery+Ajax は次のように同様の効果を実現します。

データベース設計

最初に 2 つのテーブルを用意します。pic テーブルには、ユーザーが「いいね！」をクリックした後の 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では、PHPを通じてpic table内の画像情報を読み込んで表示し、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'];
   ?>
   

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 リクエストを送信することを意味します。たとえば、製品に「いいね！」をしたい場合などです。製品テーブルには 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 を学習するすべての人に役立つことを願っています。