个人中心
gpt4 book ai didi

php+mysql结合Ajax实现点赞功能完整实例

转载 作者：qq735679552 更新时间：2022-09-29 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章php+mysql结合Ajax实现点赞功能完整实例由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

本文实例讲述了php+mysql结合Ajax实现点赞功能的方法。分享给大家供大家参考。具体如下:

要实现点赞功能，有多种实现方式，这里总结一下利用Ajax，php和mysql来实现点赞的数据的功能。具体步骤如下:

1、页面中的HTML代码部分:

?
1
2
3
4
5
6
7
8
9
10
11
< span >0</ span >
< button onclick = "goodplus(1);" >good+1</ button >
 
< span >0</ span >
< button onclick = "goodplus(2);" >good+1</ button >
 
< span >0</ span >
< button onclick = "goodplus(3);" >good+1</ button >
 
< span >0</ span >
< button onclick = "goodplus(4);" >good+1</ button >

2、写javascript 。

1、实现上面的button的点击事件goodplus 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var span = document.getElementsByTagName( 'span' ); //获取存放点赞数的dom
  var num; //点赞数
  var flag = 0; //不同情况的标记
  
  function goodplus(gindex){
   flag = 1;
   num = parseInt(span.item(gindex-1).innerHTML);
   if (checkcookie(gindex) == true ){
    num = num + 1;
    senddata(gindex); //通过Ajax修改页面上的数据
   } else {
    alert( "你已经点过赞咯！" ) 
   }
}

2、页面一打开时就应该更新点赞数据 。

?
1
2
3
for ( var i = 1; i < span.length + 1; i++){
   senddata(i); 
}

3、通过Ajax获取数据senddata函数 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function senddata(aindex){
   var xmlhttp;
   var txt;
   if (window.XMLHttpRequest){
    xmlhttp= new XMLHttpRequest();
   } else {
    xmlhttp= new ActiveXObject( "Microsoft.XMLHTTP" );
   }
   xmlhttp.onreadystatechange= function (){
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
     txt = xmlhttp.responseText; //获取返回的数据
     var cookieindex = aindex - 1;
     document.getElementsByTagName( 'span' ).item(cookieindex).innerHTML = txt; //赋值
    }
   }
   xmlhttp.open( "GET" , "路径/index.php?num=" + num + '&flag=' + flag + '&aindex=' + aindex, true );
   xmlhttp.send();
}

4、通过设置cookie来判断是否已经点赞，如果有cookie则提示已经点赞，如果没有cookie则允许点赞，而且会设置cookie 。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//判断是否已经存在了cookie
function checkcookie(gindex){
   var thiscookie = 'goodplus' + gindex;
   var mapcookie = getCookie(thiscookie)
   if (mapcookie!= null && mapcookie!= "" ){
    return false ;
   } else {
    setCookie(thiscookie,thiscookie,365);
    return true ;
   } 
}
 
//获取cookie
function getCookie(c_name){ //获取cookie，参数是名称。
   if (document.cookie.length > 0){ //当cookie不为空的时候就开始查找名称
    c_start = document.cookie.indexOf(c_name + "=" );
    if (c_start != -1){           //如果开始的位置不为-1就是找到了、找到了之后就要确定结束的位置
     c_start = c_start + c_name.length + 1 ;
  //cookie的值存在名称和等号的后面，所以内容的开始位置应该是加上长度和1
     c_end = document.cookie.indexOf( ";" , c_start);
     if (c_end == -1) {
      c_end = document.cookie.length;
     }
     return unescape(document.cookie.substring(c_start , c_end)); //返回内容，解码。
    }
   }
   return "" ;
}
 
//设置cookie
function setCookie(c_name,value,expiredays){
//存入名称，值，有效期。有效期到期事件是今天+有效天数。然后存储cookie，
   var exdate= new Date();
   exdate.setDate( exdate.getDate() + expiredays )
   document.cookie = c_name + "=" + escape(value) + ((expiredays== null ) ? "" : "; expires=" + exdate.toGMTString())
}

3、index.php页面:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
$num = $_GET [ 'num' ];
$aindex = $_GET [ 'aindex' ];
$con = mysql_connect( "localhost" , "root" , "" );
 
if (! $con ){
  die ( 'Could not connect: ' . mysql_error());
}
 
mysql_select_db( "goodplus" , $con );
 
$sql0s = "SELECT * FROM `good` where `id` = " . $aindex ;
$sql0 = mysql_query( $sql0s );
 
if ( $_GET [ 'flag' ] == 0){
  while ( $row = mysql_fetch_array( $sql0 )){
  echo $row [ 'value' ];
  }
} else if ( $_GET [ 'flag' ] == 1){
  $sql = "UPDATE `goodplus`.`good` SET `value` = '" . $num . "' WHERE `good`.`id` = " . $aindex ;
 
  if (!mysql_query( $sql , $con )){
  die ( 'Error: ' . mysql_error());
  }
  echo $num ;
}
mysql_close( $con )
?>

4、最终的index.html页面如下:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
< html xmlns = "http://www.w3.org/1999/xhtml" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=gb2312" />
< title >无标题文档</ title >
</ head >
 
< body >
 
< span >0</ span >
< button onclick = "goodplus(1);" >good+1</ button >
 
< span >0</ span >
< button onclick = "goodplus(2);" >good+1</ button >
 
< span >0</ span >
< button onclick = "goodplus(3);" >good+1</ button >
 
< span >0</ span >
< button onclick = "goodplus(4);" >good+1</ button >
 
< script type = "text/javascript" >
  var span = document.getElementsByTagName('span');
  var num;
  var flag = 0;
 
  for(var i = 1; i < span.length + 1; i++){
  senddata(i);
  }
 
  function goodplus(gindex){
  flag = 1 ;
  num = parseInt (span.item(gindex-1).innerHTML);
  if(checkcookie(gindex) == true){
  num = num + 1;
  senddata(gindex);
  }else{
  alert("你已经点过赞咯！")
  }
  }
 
  function senddata(aindex){
  var xmlhttp;
  var txt;
  if(window.XMLHttpRequest){
  xmlhttp = new XMLHttpRequest();
  }else{
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function (){
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
  txt = xmlhttp .responseText;
  var cookieindex = aindex - 1;
  document.getElementsByTagName('span').item(cookieindex) .innerHTML = txt ;
  }
  }
  xmlhttp.open("GET","/ajax/json/index.php?num=" + num + '& flag = ' + flag + ' &aindex=' + aindex,true);
  xmlhttp.send();
  }
 
//判断是否已经存在了cookie
  function checkcookie(gindex){
  var thiscookie = 'sdcity_foodmap_goodplus' + gindex;
  var mapcookie = getCookie (thiscookie)
  if (mapcookie!=null && mapcookie!=""){
  return false;
  }else {
  setCookie(thiscookie,thiscookie,365);
  return true;
  }
  }
 
//获取cookie
  function getCookie(c_name){
//获取cookie，参数是名称。
  if (document.cookie.length > 0){
//当cookie不为空的时候就开始查找名称
  c_start = document.cookie.indexOf(c_name + "=");
  if (c_start != -1){
//如果开始的位置不为-1就是找到了、找到了之后就要确定结束的位置
  c_start = c_start + c_name.length + 1 ;
//cookie的值存在名称和等号的后面，所以内容的开始位置应该是加上长度和1
  c_end = document.cookie.indexOf(";" , c_start);
  if (c_end == -1) {
   c_end = document.cookie.length;
  }
  return unescape(document.cookie.substring(c_start , c_end));//返回内容，解码。
  }
  }
  return "";
  }
 
//设置cookie
  function setCookie(c_name,value,expiredays){
//存入名称，值，有效期。有效期到期事件是今天+有效天数。然后存储cookie，
  var exdate=new Date();
  exdate.setDate( exdate.getDate() + expiredays )
  document.cookie = c_name + "=" + escape(value) + ((expiredays==null) ? "" : "; expires=" + exdate.toGMTString())
  }
</ script >
</ body >
</ html >

希望本文所述对大家的php程序设计有所帮助.

最后此篇关于php+mysql结合Ajax实现点赞功能完整实例的文章就讲到这里了,如果你想了解更多关于php+mysql结合Ajax实现点赞功能完整实例的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： php+xml结合Ajax实现点赞功能完整实例
文章推荐： PHP速成大法
文章推荐： PHP制作百度词典查词采集器
文章推荐： php+mysqli事务控制实现银行转账实例
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com