Home>

To implement the like feature,There are multiple ways to achieve this,Here is a summary of the use of ajax, php and mysql to achieve like data function.Specific steps are as follows:

First, the html code part of the page:

<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>

Writing JavaScript

1.Implement the click event goodplus of the button above

var span=document.getelementsbytagname ("span");// Get the dom that stores the number of likes
 var num;// Number of likes
 var flag=0;// flags for different situations
 function goodplus (gindex) {
  flag=1;
  num=parseint (span.item (gindex-1) .innerhtml);
  if (checkcookie (gindex) == true) {
   num=num + 1;
   senddata (gindex);// Modify the data on the page through ajax
  } else {
   alert ("You have already liked it!")
  }
}

2.The Like data should be updated as soon as the page is opened

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

3.Get data through ajax senddata function

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;// Get the returned data
    var cookieindex=aindex-1;
    document.getelementsbytagname ("span"). item (cookieindex) .innerhtml=txt;// assign
   }
  }
  xmlhttp.open ("get", "path/index.php?num =" + num + "&flag =" + flag + "&aindex =" + aindex, true);
  xmlhttp.send ();
}

4. Determine if you have liked by setting a cookie,If there is a cookie, the reminder has been liked,Likes are allowed if there is no cookie,And will set cookies

// Determine if a cookie already exists
function checkcookie (gindex) {
  var thiscookie="goodplus" + gindex;
  var mapcookie=getcookie (thiscookie)
  if (mapcookie!=null && mapcookie!="") {
   return false;
  } else {
   setcookie (thiscookie, thiscookie, 365);
   return true;
  }
}
// Get cookies
function getcookie (c_name) {// Get cookie, the parameter is name.
  if (document.cookie.length>0) {// When the cookie is not empty, start to look up the name
   c_start=document.cookie.indexof (c_name + "=");
   if (c_start!=-1) {// If the start position is not -1, it is found, and the end position must be determined after found
    c_start=c_start + c_name.length + 1;
 // The value of cookie exists after the name and the equal sign,So the starting position of the content should be plus length and 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 content,decoding.
   }
  }
  return "";
}
// Set cookies
function setcookie (c_name, value, expiredays) {
// Save the name,Value, expiry date. The expiration date is today + valid days.
Then store cookies,  var exdate=new date ();
  exdate.setdate (exdate.getdate () + expiredays)
  document.cookie=c_name + "=" + escape (value) + ((expiredays == null)?"":";expires =" + exdate.togmtstring ())
}

Third, the index.php page:

<?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)
?>

Fourth, the final index.html page is as follows:

<! 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>untitled document</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 ("You have already liked it!")
 }
 }
 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 ();
 }
// Determine if a cookie already exists
 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;
 }
 }
// Get cookies
 function getcookie (c_name) {
// Get cookie, parameter is name.
 if (document.cookie.length>0) {
// When the cookie is not empty, start looking for the name
 c_start=document.cookie.indexof (c_name + "=");
 if (c_start!=-1) {
// If the starting position is not -1, it is found, and after it is found, the ending position is determined
 c_start=c_start + c_name.length + 1;
// The value of cookie exists after the name and the equal sign,So the starting position of the content should be plus length and 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 content,decoding.
 }
 }
 return "";
 }
// Set cookies
 function setcookie (c_name, value, expiredays) {
// Save the name,Value, expiry date. The expiration date is today + valid days.
Then store cookies, var exdate=new date ();
 exdate.setdate (exdate.getdate () + expiredays)
 document.cookie=c_name + "=" + escape (value) + ((expiredays == null)?"":";expires =" + exdate.togmtstring ())
 }
</script>
</body>
</html>
php
  • Previous Windwos server remote desktop 3 ways to restrict users from using the same session
  • Next Analysis of $click () invalidity in jQuery