cari
Rumahpembangunan bahagian belakangtutorial phpphp+jQuery+Ajax实现点赞效果的方法(附源码下载)_php技巧

本文实例讲述了php+jQuery+Ajax实现点赞效果的方法。分享给大家供大家参考,具体如下:

数据库设计

先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“赞”总数,pic_ip则记录用户点击赞后的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表中的图片信息并展示出来,结合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="php+jQuery+Ajax实现点赞效果的方法(附源码下载)_php技巧" >" 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代码

当用户点击自己喜欢的图片上的红心按钮时,向后台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、更新图片表中对应的图片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 你可以直接建立test 数据库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程序设计有所帮助。

Kenyataan
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Di luar gembar -gembur: Menilai peranan PHP hari iniDi luar gembar -gembur: Menilai peranan PHP hari iniApr 12, 2025 am 12:17 AM

PHP kekal sebagai alat yang kuat dan digunakan secara meluas dalam pengaturcaraan moden, terutamanya dalam bidang pembangunan web. 1) PHP mudah digunakan dan diintegrasikan dengan lancar dengan pangkalan data, dan merupakan pilihan pertama bagi banyak pemaju. 2) Ia menyokong penjanaan kandungan dinamik dan pengaturcaraan berorientasikan objek, sesuai untuk membuat dan mengekalkan laman web dengan cepat. 3) Prestasi PHP dapat ditingkatkan dengan caching dan mengoptimumkan pertanyaan pangkalan data, dan komuniti yang luas dan ekosistem yang kaya menjadikannya masih penting dalam timbunan teknologi hari ini.

Apakah rujukan yang lemah dalam PHP dan bilakah mereka berguna?Apakah rujukan yang lemah dalam PHP dan bilakah mereka berguna?Apr 12, 2025 am 12:13 AM

Dalam PHP, rujukan lemah dilaksanakan melalui kelas lemah dan tidak akan menghalang pemungut sampah daripada menebus objek. Rujukan lemah sesuai untuk senario seperti sistem caching dan pendengar acara. Harus diingat bahawa ia tidak dapat menjamin kelangsungan hidup objek dan pengumpulan sampah mungkin ditangguhkan.

Terangkan kaedah sihir __invoke dalam PHP.Terangkan kaedah sihir __invoke dalam PHP.Apr 12, 2025 am 12:07 AM

Kaedah \ _ \ _ membolehkan objek dipanggil seperti fungsi. 1. Tentukan kaedah \ _ \ _ supaya objek boleh dipanggil. 2. Apabila menggunakan sintaks $ OBJ (...), PHP akan melaksanakan kaedah \ _ \ _ invoke. 3. Sesuai untuk senario seperti pembalakan dan kalkulator, meningkatkan fleksibiliti kod dan kebolehbacaan.

Terangkan serat dalam Php 8.1 untuk keserasian.Terangkan serat dalam Php 8.1 untuk keserasian.Apr 12, 2025 am 12:05 AM

Serat diperkenalkan dalam Php8.1, meningkatkan keupayaan pemprosesan serentak. 1) Serat adalah model konkurensi ringan yang serupa dengan coroutine. 2) Mereka membenarkan pemaju mengawal aliran pelaksanaan tugas secara manual dan sesuai untuk mengendalikan tugas I/O-intensif. 3) Menggunakan serat boleh menulis kod yang lebih cekap dan responsif.

Komuniti PHP: Sumber, Sokongan, dan PembangunanKomuniti PHP: Sumber, Sokongan, dan PembangunanApr 12, 2025 am 12:04 AM

Komuniti PHP menyediakan sumber dan sokongan yang kaya untuk membantu pemaju berkembang. 1) Sumber termasuk dokumentasi rasmi, tutorial, blog dan projek sumber terbuka seperti Laravel dan Symfony. 2) Sokongan boleh didapati melalui saluran StackOverflow, Reddit dan Slack. 3) Trend pembangunan boleh dipelajari dengan mengikuti RFC. 4) Integrasi ke dalam masyarakat dapat dicapai melalui penyertaan aktif, sumbangan kepada kod dan perkongsian pembelajaran.

PHP vs Python: Memahami PerbezaanPHP vs Python: Memahami PerbezaanApr 11, 2025 am 12:15 AM

PHP dan Python masing -masing mempunyai kelebihan sendiri, dan pilihannya harus berdasarkan keperluan projek. 1.Php sesuai untuk pembangunan web, dengan sintaks mudah dan kecekapan pelaksanaan yang tinggi. 2. Python sesuai untuk sains data dan pembelajaran mesin, dengan sintaks ringkas dan perpustakaan yang kaya.

PHP: Adakah ia mati atau hanya menyesuaikan diri?PHP: Adakah ia mati atau hanya menyesuaikan diri?Apr 11, 2025 am 12:13 AM

PHP tidak mati, tetapi sentiasa menyesuaikan diri dan berkembang. 1) PHP telah menjalani beberapa lelaran versi sejak tahun 1994 untuk menyesuaikan diri dengan trend teknologi baru. 2) Ia kini digunakan secara meluas dalam e-dagang, sistem pengurusan kandungan dan bidang lain. 3) Php8 memperkenalkan pengkompil JIT dan fungsi lain untuk meningkatkan prestasi dan pemodenan. 4) Gunakan OPCACHE dan ikut piawaian PSR-12 untuk mengoptimumkan prestasi dan kualiti kod.

Masa Depan PHP: Adaptasi dan InovasiMasa Depan PHP: Adaptasi dan InovasiApr 11, 2025 am 12:01 AM

Masa depan PHP akan dicapai dengan menyesuaikan diri dengan trend teknologi baru dan memperkenalkan ciri -ciri inovatif: 1) menyesuaikan diri dengan pengkomputeran awan, kontena dan seni bina microservice, menyokong Docker dan Kubernetes; 2) memperkenalkan pengkompil JIT dan jenis penghitungan untuk meningkatkan prestasi dan kecekapan pemprosesan data; 3) Berterusan mengoptimumkan prestasi dan mempromosikan amalan terbaik.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SecLists

SecLists

SecLists ialah rakan penguji keselamatan muktamad. Ia ialah koleksi pelbagai jenis senarai yang kerap digunakan semasa penilaian keselamatan, semuanya di satu tempat. SecLists membantu menjadikan ujian keselamatan lebih cekap dan produktif dengan menyediakan semua senarai yang mungkin diperlukan oleh penguji keselamatan dengan mudah. Jenis senarai termasuk nama pengguna, kata laluan, URL, muatan kabur, corak data sensitif, cangkerang web dan banyak lagi. Penguji hanya boleh menarik repositori ini ke mesin ujian baharu dan dia akan mempunyai akses kepada setiap jenis senarai yang dia perlukan.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

Versi Mac WebStorm

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna