php+jQuery+Ajax (ソースコードのダウンロード付き)、jqueryajax を使用して同様の効果を実現する方法

同様の効果を実現する php+jQuery+Ajax メソッド (ソース コードのダウンロード付き)、jqueryajax

この記事では、同様の効果を実現する php+jQuery+Ajax の例について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

データベース設計

最初に 2 つのテーブルを用意します。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では、PHPを通じてpic table内の画像情報を読み込んで表示し、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 リクエストを送信することを意味します。たとえば、製品に「いいね！」をしたい場合などです。製品テーブルには 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+xml を Ajax と組み合わせて、同様の関数の完全な例を実現
• php+mysql を Ajax と組み合わせて完全な例を実現like関数の例
• jQuery+ajaxで記事like関数を実装する方法
• jQueryで実装した超簡単なlike効果の分析例
• JQueryで+1アニメーション効果を実装
• jQuery はいいねの乱数表示アニメーション効果を実現します (オンライン デモとデモ ソース コードのダウンロード付き)
• jQuery は単純に QQ を実装しますスペースが「いいね」を押し、「いいね」をキャンセルしました