php+jQuery+Ajax实现点赞效果的方法(附源码下载),jqueryajax
Jun 16, 2016 am 09:16 AMphp+jQuery+Ajax实现点赞效果的方法(附源码下载),jqueryajax
本文实例讲述了php+jQuery+Ajax实现点赞效果的方法。分享给大家供大家参考,具体如下:
数据库设计
先准备两张表,pic表保存的是图片信息,包括图片对应的名称、路径以及图片“赞”总数,pic_ip则记录用户点击赞后的IP数据。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
index.php
在index.php中,我们通过PHP读取pic表中的图片信息并展示出来,结合CSS,提升页面展示效果。
1 2 3 4 5 6 7 8 9 10 11 12 |
|
CSS中,我们将定义鼠标滑向和离开红心按钮的动态效果,并定位按钮的位置。
1 2 3 4 5 6 7 |
|
jQuery代码
当用户点击自己喜欢的图片上的红心按钮时,向后台love.php发送ajax请求,请求响应成功后,更新原有的数值
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
love.php
后台love.php接收前端的ajax请求,根据提交的图片id值,查找IP表中是否已有该用户ip的点击记录,如果有则告诉用户已“赞过了”,反之,则进行一下操作:
1、更新图片表中对应的图片love字段值,将数值加1。
2、将该用户IP信息写入到pic_ip表中,用以防止用户重复点击。
3、获取更新后的赞值,即赞该图片的用户总数,并将该总数输出给前端页面。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
我上传的附件中 数据库SQL 你可以直接建立test 数据库UTF8编码的,然后把SQL文件导入进去。修改一下connect.php中数据库的连接信息即可。
源文件点击此处本站下载。
总结:
其实就是发了一个ajax请求,比如你要赞一个商品。商品表肯定有一个计数的字段。你发一个请求过去把这个字段+1
该成功了就返回一个现在的数。然后把页面改一下就成了
1 2 3 4 5 6 7 8 |
|
希望本文所述对大家php程序设计有所帮助。
您可能感兴趣的文章:
- php+xml结合Ajax实现点赞功能完整实例
- php+mysql结合Ajax实现点赞功能完整实例
- jQuery+ajax实现文章点赞功能的方法
- jQuery实现的超简单点赞效果实例分析
- jQuery实现的给图片点赞+1动画效果(附在线演示及demo源码下载)
- jQuery实现的点赞随机数字显示动画效果(附在线演示与demo源码下载)
- jQuery简单实现QQ空间点赞已经取消点赞

Heißer Artikel

Hot-Tools-Tags

Heißer Artikel

Heiße Artikel -Tags

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen

PHP 8.4 Installations- und Upgrade-Anleitung für Ubuntu und Debian

So richten Sie Visual Studio-Code (VS-Code) für die PHP-Entwicklung ein
