点赞功能原理。     图片。

1.connect.php文件

  1. <?php
  2. $host="localhost";
  3. $db_user="root";
  4. $db_pass="111111";
  5. $db_name="dianzan";
  6. $timezone="Asia/Shanghai";
  7.  
  8. $link=mysql_connect($host,$db_user,$db_pass);
  9. mysql_select_db($db_name,$link);
  10. mysql_query("SET names UTF8");
  11. ?>

2.love.php文件

  1. <?php
  2. include_once("connect.php");
  3.  
  4. $ip = get_client_ip();
  5. $id = $_POST['id'];
  6. if(!isset($id) || empty($id)) exit;
  7.  
  8. $ip_sql=mysql_query("select ip from pic_ip where pic_id='$id' and ip='$ip'");
  9. $count=mysql_num_rows($ip_sql);
  10. if($count==0){
  11. $sql = "update pic set love=love+1 where id='$id'";
  12. mysql_query( $sql);
  13. $sql_in = "insert into pic_ip (pic_id,ip) values ('$id','$ip')";
  14. mysql_query( $sql_in);
  15. $result = mysql_query("select love from pic where id='$id'");
  16. $row = mysql_fetch_array($result);
  17. $love = $row['love'];
  18. echo $love;
  19. }else{
  20. echo "赞过了..";
  21. }
  22.  
  23. //获取用户真实IP
  24. function get_client_ip() {
  25. if (getenv("HTTP_CLIENT_IP") && strcasecmp(getenv("HTTP_CLIENT_IP"), "unknown"))
  26. $ip = getenv("HTTP_CLIENT_IP");
  27. else
  28. if (getenv("HTTP_X_FORWARDED_FOR") && strcasecmp(getenv("HTTP_X_FORWARDED_FOR"), "unknown"))
  29. $ip = getenv("HTTP_X_FORWARDED_FOR");
  30. else
  31. if (getenv("REMOTE_ADDR") && strcasecmp(getenv("REMOTE_ADDR"), "unknown"))
  32. $ip = getenv("REMOTE_ADDR");
  33. else
  34. if (isset ($_SERVER['REMOTE_ADDR']) && $_SERVER['REMOTE_ADDR'] && strcasecmp($_SERVER['REMOTE_ADDR'], "unknown"))
  35. $ip = $_SERVER['REMOTE_ADDR'];
  36. else
  37. $ip = "unknown";
  38. return ($ip);
  39. }
  40. ?>

3.index.php文件

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="keywords" content="jquery">
  6. <meta name="description" content="">
  7. <title>jQuery+Ajax+PHP实现“赞”</title>
  8. <link rel="stylesheet" type="text/css" href="../css/main.css" />
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  10. <script type="text/javascript">
  11. $(function(){
  12. $("p a").click(function(){
  13. var love = $(this);
  14. var id = love.attr("rel");
  15. love.fadeOut(50);
  16. $.ajax({
  17. type:"POST",
  18. url:"love.php",
  19. data:"id="+id,
  20. cache:false,
  21. success:function(data){
  22. love.html(data);
  23. love.fadeIn(50);
  24. }
  25. });
  26. return false;
  27. });
  28. });
  29. </script>
  30. <style type="text/css">
  31. @charset "utf-8";
  32. /* CSS Document */
  33. html,body,div,span,h1,h2,h3,h4,h5,h6,p,pre,a,code,em,img,small,strong,sub,sup,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
  34. a{color:#007bc4/*#424242*/; text-decoration:none;}
  35. a:hover{text-decoration:underline}
  36. ol,ul{list-style:none}
  37. table{border-collapse:collapse;border-spacing:0}
  38. body{height:100%; font:12px/18px "Microsoft Yahei", Tahoma, Helvetica, Arial, Verdana, "\5b8b\4f53", sans-serif; color:#51555C; background:#162934 url(../images/body_bg.gif) repeat-x}
  39. img{border:none}
  40.  
  41. #header{width:980px; height:92px; margin:0 auto; position:relative}
  42. #logo{width:240px; height:90px; background:url(../images/logo_demo.gif) no-repeat}
  43. #logo h1{text-indent:-999em}
  44. #logo h1 a{display:block; width:240px; height:90px}
  45.  
  46. #main{width:980px; min-height:600px; margin:30px auto 0 auto; background:#fff; -moz-border-radius:12px;-khtml-border-radius: 12px;-webkit-border-radius: 12px; border-radius:12px;}
  47. h2.top_title{margin:4px 20px; padding-top:15px; padding-left:20px; padding-bottom:10px; border-bottom:1px solid #d3d3d3; font-size:18px; color:#a84c10; background:url(../images/arrL.gif) no-repeat 2px 14px}
  48.  
  49. #footer{height:60px;}
  50. #footer p{ padding:10px 2px; line-height:24px; text-align:center}
  51. #footer p a:hover{color:#51555C}
  52.  
  53. .clear{clear:both}
  54. .list{width:760px; margin:20px auto}
  55. .list li{float:left; width:360px; height:280px; margin:10px; position:relative}
  56. .list li p{position:absolute; top:0; left:0; width:90px; height:24px; line-height:24px; background:#000; opacity:.8;filter:alpha(opacity=80);}
  57. .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}
  58. .list li p a:hover{background-position:4px -25px;text-decoration:none}
  59. </style>
  60. </head>
  61.  
  62. <body>
  63. <div id="header">
  64. <div id="logo"><h1><a href="http://www.jjm.hk" title="返回首页">精工坊</a></h1></div>
  65. </div>
  66. <div id="main">
  67. <h2 class="top_title">jQuery+Ajax+PHP实现“赞”</h2>
  68. <ul class="list">
  69. <?php
  70. include_once("connect.php");
  71. $sql = mysql_query("select * from pic");
  72. while($row=mysql_fetch_array($sql)){
  73. $pic_id = $row['id'];
  74. $pic_name = $row['pic_name'];
  75. $pic_url = $row['pic_url'];
  76. $love = $row['love'];
  77. ?>
  78. <li><p><a href="#" title="赞" class="img_on" rel="<?php echo $pic_id;?>"><?php echo $love;?></a></p></li>
  79.  
  80. <?php }?>
  81. </ul>
  82. <div class="clear"></div>
  83.  
  84. </div>
  85. </body>
  86. </html>

4.引入sql语句 ---pic.sql

  1. /*
  2. Navicat MySQL Data Transfer
  3.  
  4. Source Server : localhost_3306
  5. Source Server Version : 50517
  6. Source Host : localhost:3306
  7. Source Database : test
  8.  
  9. Target Server Type : MYSQL
  10. Target Server Version : 50517
  11. File Encoding : 65001
  12.  
  13. Date: 2014-01-11 23:10:18
  14. */
  15.  
  16. SET FOREIGN_KEY_CHECKS=0;
  17. -- ----------------------------
  18. -- Table structure for `pic`
  19. -- ----------------------------
  20. DROP TABLE IF EXISTS `pic`;
  21. CREATE TABLE `pic` (
  22. `id` int(11) NOT NULL AUTO_INCREMENT,
  23. `pic_name` varchar(60) NOT NULL,
  24. `pic_url` varchar(60) NOT NULL,
  25. `love` int(11) NOT NULL DEFAULT '0',
  26. PRIMARY KEY (`id`)
  27. ) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;
  28.  
  29. -- ----------------------------
  30. -- Records of pic
  31. -- ----------------------------
  32. INSERT INTO `pic` VALUES ('1', '1', 's1.jpg', '1');
  33. INSERT INTO `pic` VALUES ('2', '2', 's2.jpg', '0');

5.sql语句--pic_ip.sql

  1. /*
  2. Navicat MySQL Data Transfer
  3.  
  4. Source Server : localhost_3306
  5. Source Server Version : 50517
  6. Source Host : localhost:3306
  7. Source Database : test
  8.  
  9. Target Server Type : MYSQL
  10. Target Server Version : 50517
  11. File Encoding : 65001
  12.  
  13. Date: 2014-01-11 23:10:27
  14. */
  15.  
  16. SET FOREIGN_KEY_CHECKS=0;
  17. -- ----------------------------
  18. -- Table structure for `pic_ip`
  19. -- ----------------------------
  20. DROP TABLE IF EXISTS `pic_ip`;
  21. CREATE TABLE `pic_ip` (
  22. `id` int(11) NOT NULL AUTO_INCREMENT,
  23. `pic_id` int(11) NOT NULL,
  24. `ip` varchar(40) NOT NULL,
  25. PRIMARY KEY (`id`)
  26. ) ENGINE=MyISAM AUTO_INCREMENT=2 DEFAULT CHARSET=utf8;
  27.  
  28. -- ----------------------------
  29. -- Records of pic_ip
  30. -- ----------------------------
  31. INSERT INTO `pic_ip` VALUES ('1', '1', '127.0.0.1');

  

 

php+MySQL+Ajax的更多相关文章

  1. 利用PHP+MySql+Ajax操作实现年月日联动功能

    PHP+MySql+Ajax实现年月日的三级联动 <!DOCTYPE html><html>    <head>        <meta charset=& ...

  2. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  3. PHP+MYSQL+AJAX实现每日签到功能

    一.web前端及ajax部分 文件index.html <html> <head> <meta http-equiv=Content-Type content=" ...

  4. My First Django Project - <Django + MySQL + Ajax> (1)

    因为最近工作有些信息需要额外花时间去收集,但是现在有相关的operations每天记录状态,但是没有一个很好的状态收集工具,将状态收集起来,所以很多情况下我们不知道是状态变好了,还是变差.如果使用EX ...

  5. ECharts, PHP, MySQL, Ajax, JQuery 实现前后端数据可视化

    ECharts 下载js代码 工作原理浅析 在项目中引入ECharts 后台处理 数据库端MySQL PHP端 JQuery Ajax处理 ECharts 端处理 前端全部代码 演示结果 总结 最近要 ...

  6. 再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销

    写在前面 ajax学习到了第二天,这次是用第一天封装的ajax函数,后端使用了php+mysql实现基本的注册,登录,注销. php是我前几个月get到的技能,我已经学习到了面向对象,知道各修饰符的含 ...

  7. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  8. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面

    首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...

  9. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面

    在上一篇随笔中,我们已经看了如何实现前台的对话功能:前台我限定了店主只有一人,店铺只有一个,所有比较单一,但后台就不一样了,而后台更像是我们常见的聊天软件:当然,前台也应该实现这种效果,但原理懂了,可 ...

随机推荐

  1. XPath Checker和Firebug安装与使用

    一.XPath Checker和Firebug简介 XPath Checker和Firebug是写爬虫过程中提取数据的非常有用的插件工具,直接打开火狐浏览器的菜单就可以下载 二.XPath Check ...

  2. 转 strace

    转自http://www.cnblogs.com/ggjucheng/archive/2012/01/08/2316692.html strace常用来跟踪进程执行时的系统调用和所接收的信号. 在Li ...

  3. H5的一些小问题

    [每日壹闻]常用HTML代码解释-------六.歌曲代码(1):在这组代码中,不必管它是mms.http.rtsp,只要看尾缀是asf.wma.wmv.wmv.rm都可适用下面的代码:1. 手动播放 ...

  4. Underscore.js基础入门

    公司产品集成了对Underscore.js,所以需要对这个库有一定的了解.通过查阅资料,发现这个库主是对Array和JSON的处理支持.通过Underscore.js库,可以方便的对Array和JSO ...

  5. LeetCode 374. Guess Number Higher or Lower

    We are playing the Guess Game. The game is as follows: I pick a number from 1 to n. You have to gues ...

  6. 【转载】windows平台安装nodejs过程

    第一步 下载nodejs 访问https://nodejs.org/en/download/url 根据您的系统是32位或64位,按照文字说明进行下载 第二步 安装nodejs 双击运行nodejs的 ...

  7. Android SQLiteOpenHelper类的使用

    SQLiteOpenHelper类是Android平台提供的用于SQLite数据库的创建.打开以及版本管理的帮助类.一般需要继承并这个类并实现它的onCreate和onUpgrade方法,在构造方法中 ...

  8. win10 chrome浏览器字体小,模糊

    解决方案: chrome://flags/

  9. Installing Intellij IDEA sublime-text-2 on Ubuntu

    he installation on Linux is traditionally more complicated. I wonder why people complain about the l ...

  10. Latex感想

    看人家,一个小女生,被导师逼着,首先对电脑方面理解不多,3天时间,latex已经把Paper框架建立起来,我可以说我自愧不如吗?德鲁克<卓有成效的管理者>说的一次干一件事情,<冬吴相 ...