PHP は jQuery の ajax 非リフレッシュ送信を組み合わせて同様の関数を実装します

この記事では主にphpとjQueryの非リフレッシュ送信を組み合わせていいね機能を実装する方法を紹介していますので、興味のある方は参考にしていただければ幸いです。

データベース設計

まず、pic テーブルには、写真の名前、パス、「いいね！」の合計数などの写真情報が保存され、ユーザーが「いいね！」をクリックした後の IP データが 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[&#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コード

ユーザーが気に入った画像の赤いハートボタンをクリックすると、バックグラウンドのlove.phpにAjaxリクエストが送信され、リクエストの応答が成功した後、元の値が更新されます

$(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 の openssl 暗号化拡張機能の使用の概要

以上がPHP は jQuery の ajax 非リフレッシュ送信を組み合わせて同様の関数を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。