php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)

记录每个赞的点赞用户,以及对赞的数量统计
首先判断用户是否点赞。根据是否点赞,载入不同的html,调用不同的方法

已点赞

如果已点赞,显示已点赞的html,进行取消点赞操作

未点赞

如果未点赞,显示未点赞的html,进行点赞操作

对于不同操作,对数据库进行增加或减少操作。同时对于不同用户的点赞,进行增加记录或删除记录操作。通过控制不同按钮的背景,来显示不同的效果。通过记录不同用户的用户id和赞的id之间的关系,进行不同点赞的限制。

效果演示

当用户id为1时,进行点赞,点赞数加1

更改用户id,当id为2时,用户1的用户已进行了点赞,点赞数在用户1点赞基础上增加1

数据库

数据库,分为两个数据表。一个进行对点赞数的统计,一个进行不同用户的点赞记录。

两个数据表的详细信息

连接数据库

$con = new mysqli('localhost','root','','test');
	if (!$con)
	{
	 die('连接数据库失败,失败原因:' . mysqli_error());
	}else {
	 // echo "连接成功";
	}

对用户是否点赞进行判断(操作页面)

对数据库的信息进行提取

//假设用户编号为1
	$uId="1";

	//假设赞编号为1
	$zanId="1";

	//查找赞id为1的点赞数
	$count=mysqli_query($con, "SELECT count FROM zanCount WHERE zanId=$zanId ");
	$countResult=mysqli_fetch_array($count);
	$countZan=$countResult['count'];

	//查找改用户是否对赞id为1 点赞
	$uIdLike=mysqli_query($con, "SELECT * FROM zanRecord WHERE uId=$uId ");
	$result=mysqli_fetch_array($uIdLike);

对用户是否点赞进行判断,并输出不同的html

//点赞
if (isset($result))
	{
	 $showZan.=<<<html
  <div class="dolikeDIV" id="dolikeDIV">
		 <button id="dolike" οnclick="zanDel()"></button>
		 <span id="zan">$countZan</span>
  </div>
html;

	}
	//没点赞
	else
	{
	 $showZan.=<<<html
 <div class="dolikeDIV" id="dolikeDIV">
		 <button id="donolike" οnclick="zan()"></button>
		 <span id="zan">$countZan</span>
 </div>
html;
	}
	echo $showZan;
 ?>

css样式

#dolike, #donolike
{
 width:30px;
 height:30px;
 margin-left:20px;
 float:left;}
#donolike
{
background:url(./images/nolike.png);
background-size:30px 30px;
}
#dolike
{
background:url(./images/like.png);
 background-size:30px 30px;
 }

调用的ajax方法

传递需要的数据,这里传递的时zanId 和uId
记得引入jq文件
点赞

function zan()
{
	$.ajax({
		type:"POST",
		url:"./likeSever.php",
		data:{'zanId':$("#zanId").val(),'uId':$("#uId").val()},
		success:function(text){
			$("#dolikeDIV").html(text);
		}
	});

}

取消点赞

function zanDel()
{
	$.ajax({
		type:"POST",
		url:"./disSever.php",
		data:{'zanId':$("#zanId").val(),'uId':$("#uId").val()},
		success:function(text){
			$("#dolikeDIV").html(text);
		}
	});

}

处理代码

点赞处理

//更新赞总数的数据
 mysqli_query($con,"UPDATE zanCount SET count = count+1 WHERE zanId=$zanId");

 //添加一条点赞记录
 mysqli_query($con,"INSERT INTO zanRecord(zanId,uId) VALUES($zanId, $uId); ");

 //查找赞的总数
 @$count=mysqli_query($con, "SELECT count FROM zanCount WHERE zanId=$zanId ");
 @$countResult=mysqli_fetch_array($count);
 @$countZan=$countResult['count'];

 //更改输出的html
 $show="";
 $show=<<<html
 <button id="dolike" οnclick="zanDel()"></button>
		<span id="zan">$countZan</span>
html;
 echo $show;

取消点赞处理

//更新赞总数的数据
 mysqli_query($con,"UPDATE zanCount SET count = count-1 WHERE zanId=$zanId");

 //添加一条点赞记录
 mysqli_query($con,"DELETE FROM zanRecord WHERE zanId=$zanId AND uId=$uId ");

 //查找赞的总数
 @$count=mysqli_query($con, "SELECT count FROM zanCount WHERE zanId=$zanId ");
 @$countResult=mysqli_fetch_array($count);
 @$countZan=$countResult['count'];

 //更新html
 $show="";
 $show.=<<<html
 <button id="donolike" οnclick="zan()"></button>
		<span id="zan">$countZan</span>
html;

点赞的图片
图片自己画的,有点不太美观

jq下载地址
完整demo下载

到此这篇关于php+mysql+ajax 局部刷新点赞/取消点赞功能(每个账号只点赞一次)的文章就介绍到这了,更多相关php+mysql+ajax 局部刷新点赞内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

时间: 2020-07-24

PHP下ajax跨域的解决方案之window.name实例分析

本文实例讲述了PHP下ajax跨域的解决方案之window.name.分享给大家供大家参考,具体如下: 原理核心:window对象的name属性是一个很特别的属性,当该window的location变化,然后重新加载,它的name属性可以依然保持不变. 依此原理,我们可以在页面A中用iframe加载其他域的页面B,而页面B中用JavaScript把需要传递的数据赋值给 window.name,页面A的iframe加载完成之后,页面A修改iframe的地址,将其变成同域的一个地址,然后就可以读出w

PHP下ajax跨域的解决方案之jsonp实例分析

本文实例讲述了PHP下ajax跨域的解决方案之jsonp.分享给大家供大家参考,具体如下: 首先要说明一下json和jsonp的区别? json是一种基于文本的数据交换方式,或者叫做描述数据的一种格式. var person = { "name": "test", "age": "25", "sex": "男" }; var data = [1, 2, 3, 4, 5]; 而jsonp是

Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】

本文实例讲述了Jquery+AJAX实现无刷新上传并重命名文件操作.分享给大家供大家参考,具体如下: index.html <!DOCTYPE html> <html> <head> <title>Ajax上传图片</title> <meta charset="utf-8"> <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"

PHP使用ajax的post方式下载excel文件简单示例

本文实例讲述了PHP使用ajax的post方式下载excel文件.分享给大家供大家参考,具体如下: 项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token验证信息,参考了很多文章,最终实现如下: PHP后端使用base64: $filename = 'demo.xlsx'; $objWriter = \PHPExcel_IOFactory::createWriter($objectPHPExcel, 'Excel2007'); ob_start();

PHP处理Ajax请求与Ajax跨域问题

PHP判断是否为Ajax请求 我们知道,在发送ajax请求的时候,可以通过XMLHttpRequest这个对象,创建自定义的header头信息, 在jquery框架中,对于通过它的$.ajax, $.get, 或者$.post方法请求网页内容时,它会向服务器传递一个HTTP_X_REQUESTED_WITH的参数,php中就是在header一层判断是否是ajax请求,对应的根据$_SERVER['HTTP_X_REQUESTED_WITH']判断.一般情况下$_SERVER['HTTP_X_RE

PHP ajax跨子域的解决方案之document.domain+iframe实例分析

本文实例讲述了PHP ajax跨子域的解决方案之document.domain+iframe.分享给大家供大家参考,具体如下: 对于主域相同,子域不同,我们可以设置相同的document.domain来欺骗浏览器,达到跨子域的效果. 例如:我们有两个域名:www.a.com 和 img.a.com 在www.a.com下有a.html 在img.a.com下有img.json和img.html这两个文件. img.json就是一些我们要获取的数据: [ { "name" : "

PHP中运用jQuery的Ajax跨域调用实现代码

可以在页面定义一个调用方法,如下: 复制代码 代码如下: function getData(){ $.getJSON("http://123.123.123.123/?callback=?", { "m":"data",// 指定php的文件名字 "act":"getdata",// 指定php文件中的方法 "name":"问题儿童"// 传入的参数 }, funct

jquery ajax结合thinkphp的getjson实现跨域的方法

本文实例讲述了jquery ajax结合thinkphp的getjson实现跨域的方法.分享给大家供大家参考,具体如下: jquery中post的应该是不能跨域,网上说get的可以跨域,但是我试了一下也不行,然后就进行最后的拼搏getjson,结果成功,哈哈 js处写作: $.getJSON( "/index.php/Index/test", function(data){ alert(data.dd); } ); 语法: jQuery.getJSON(url,[data],[call

PHP Ajax跨域问题解决方案代码实例

本文通过设置Access-Control-Allow-Origin来实现跨域. 例如:客户端的域名是client.runoob.com,而请求的域名是server.runoob.com. 如果直接使用ajax访问,会有以下错误: XMLHttpRequest cannot load http://server.runoob.com/server.php. No 'Access-Control-Allow-Origin' header is present on the requested res

详解ajax跨域问题解决方案

今天来记录一下关于ajax跨域的一些问题.以备不时之需. 跨域 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同.这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作. 解决方式 通常来说,比较通用的有如下两种方式,一种是从服务器端下手,另一种则是从客户端的角度出发.二者各有利弊,具体要使用哪种方式还需要具体的分析. 服务器设置响应头 服务器代理 客户端采用脚本回调机制. 方式一 Access-C

ajax跨域获取网站json数据的实例

由于自己的公司的项目需要调用视频地址 1:当为链接时:直接在播放器用数据库查找的地址 2:当为外部链接时:直接用window.location.href('数据库查找的地址') 3:当为H5链接时:使用<ifram src="数据库查找的地址">播放 4:当为其余网站链接时,要去第三方网站读取json信息然后把json数据作为url放在播放器中 当为4时,我使用json时会出格式错误 当用jsonp解决跨域问题时,会出现返回格式接收不到 所以我用 public static

浅谈jquery中ajax跨域提交的时候会有2次请求的问题

我们平时在同域中请求页面什么的时候不会有这种情况,这种情况大多发生在移动端的跨域请求中发生的. 解决方法就是在服务端中加一层过滤HTTP请求的类型,把OPTION等不用的类型过滤掉.就是当请求为非 HTTP中的 GET 和 POST的时候就不执行下面的代码,这样就可以只执行一次请求了. 在ASP.NET中我们用 Request.ServerVariables["REQUEST_METHOD"] == "POST" 或者 Request.ServerVariables

AJAX跨域请求JSONP获取JSON数据的实例代码

Asynchronous JavaScript and XML (Ajax) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术.Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索.使用XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器.Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序. 不过,由于受到浏览器的限制,该方法

Ajax请求跨域问题解决方案分析

本文实例讲述了Ajax请求跨域问题解决方案.分享给大家供大家参考,具体如下: 几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1.协议,2.地址,3.端口,只有三者都相同才被认为是同一来源. 一.解决方案: 1,在服务器端的响应头中添加一个http参数: res.setHeader("Access-Control-Allow-Origin&quo

Springmvc ajax跨域请求处理方法实例详解

上次给一个网站写网站  前后端分离 最后跪在ajax跨域上面了  自己在网上找了个方法  亲试可用  记录一下 写一个类  继承HandlerInterceptorAdapter package com.util; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import org.springframework.web.servlet.handler.Ha

AJAX跨域请求数据的四种方法(实例讲解)

由于浏览器的同源策略 ajax请求不可以接收到请求响应回来的数据 请求数据需要调用浏览器的内置构造函数 XMLHttpRequest() 进行 实例对象 var xhr = new XMLHttpRequest(); 注意点 在IE8之前支持的 ActiveXobject("Microsoft.XMLHTTP");  记住要进行兼容处理哦  在这里我就不写了 通过该对象进行获取 获取数据的四种状态  xhr.readyState 该属性保存着请求数据的几种状态 1.xhr.open(请