知识：

一、首先页面需要加载jquery框架

二、ajax常用参数解释：

①、type：传输数据方式，get或者post

②、url：处理数据的PHP脚本

③、data：传输的数据索引及值，值用js获取，一般此属性为json串或字符串

④、async：参数为布尔类型，默认为true，即异步传输，浏览器不锁定

⑤、complete：参数为方法，跳转的脚本执行完成后的回调函数

⑥、success：参数为方法，跳转的脚本执行成功后的回调函数

⑦、error：参数为方法，跳转的脚本执行失败后的回调函数

三、脚本处理完成后将页面需要的数据return，之后在前端页面根据需求实现局部刷新，而不是进行跳转刷新，这是ajax最强大的地方

html代码部分：

<?php

$id = $_GET['id'];

require_once 'mysqlHelper.php';

$db = new mysqlHelper('localhost','root','root','dianzan');

$sql = "select * from news where id = '$id'";

$news = $db->GetOneData($sql);

?>

<!doctype html>

<html>

<head>

<script src="jquery-1.9.1.min.js"></script>

<meta charset="UTF-8">

</head>

<body>

<h1><?php echo $news['title'];?></h1>

<pre>

<?php echo $news['content'];?>

</pre>

<input type="hidden" name="id" value="<?php echo $id;?>">

点赞数：<span id="s"><?php echo $news['dianzan'];?></span>

<button id="btn">点赞</button>

</body>

</html>

js代码：

$("#btn").click(function(){

	$.ajax({

		url:"index.php",

		type:"POST",

		data:{id:<?php echo $id;?>},

		async:false,

		success:function(data){

			if(data === false){

				alert('点赞失败！');location.href='dianzan.php?id=<?php echo $id;?>';

			}else{

				alert('点赞成功！');$("#s").html(data);

			}

		}

	})

})

　　

PHP代码部分：

<?php

header("Content-type:text/html;charset=utf-8");

require_once 'mysqlHelper.php';

$db = new mysqlHelper('localhost','root','root','dianzan');

$id = $_POST['id'];

$sql = "UPDATE news SET dianzan = dianzan +1 WHERE id = '$id'";

$res = $db->execSql($sql);

if($res){

	$dz = $db->getOneData("select * from news where id = '$id'");

	$dz = $dz['dianzan'];

	echo $dz;

}else{

	return false;

}

?>

　　

php + ajax实现 帖子点赞功能的更多相关文章

  1. 完整的ajax请求投票点赞功能的实现【数据库表一（票数）表二（ip限制重复投票）】

    前端php页面 <?php if(isset($_GET['id'])){ $id=$_GET['id']; } include('data/conn.php'); $sqls="se ...

  2. ajax点赞功能

  3. JavaScript cookie操作实现点赞功能

    JavaScript cookie操作实现点赞功能 参考实现原理,但是代码不够简洁,简洁代码参考:js操作cookie 实现一个点赞功能十分简单,主要问题在于不能重复点赞.  若是一个有用户的网站,可 ...

  4. JavaScript实现评论点赞功能

    通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setT ...

  5. 基于微信小程序的用户列表点赞功能

    代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...

  6. 全栈项目|小书架|微信小程序-点赞功能实现

    微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...

  7. 全栈项目|小书架|服务器端-NodeJS+Koa2 实现点赞功能

    效果图 接口分析 通过上面的效果图可以看出,点赞入口主要是在书籍的详情页面. 而书籍详情页面,有以下几个功能是和点赞有关的: 获取点赞状态 点赞 取消点赞 所以项目中理论上与点赞相关的接口就以上三个. ...

  8. Day8-微信小程序实战-交友小程序-首页用户列表渲染及多账号调试及其点赞功能的实现

    在这之前已经把编辑个人的所有信息的功能已经完成了 之后先对首页的列表搞动态的,之前都是写死的静态 1.之前都是把好友写死的,现在就在js里面定义一个数组,用循环来动态的绑定 在onReady中定义,取 ...

  9. 基于SpringBoot如何实现一个点赞功能？

    基于SpringBoot如何实现一个点赞功能? 解析: 基于 SpringCloud, 用户发起点赞.取消点赞后先存入 Redis 中,再每隔两小时从 Redis 读取点赞数据写入数据库中做持久化存储 ...

随机推荐

  1. React后端管理系统-商品详情detail组件

    import React from 'react'; import MUtil from 'util/mm.jsx' import Product from 'service/product-serv ...

  2. Spring整合JUnit spring静态对象属性的注入

    package cn.itcast.d_junit4; import org.junit.Test; import org.junit.runner.RunWith; import org.sprin ...

  3. linux redis5.0 集群搭建

    一.下载 wget http://download.redis.io/releases/redis-5.0.0.tar.gz 二.解压.编译 #解押到 /usr/local/ 文件夹 tar -zxv ...

  4. RedHat6.4安装图形行化界面

    1.1    打开电源进入RedHat shell命令行界面 1.2    查看系统镜像包括的所有软件包组信息 [root@zhongyi-test ~]# yum grouplist Loaded ...

  5. 【CodeBase】PHP打印所有用户自定义常量

    print_r(get_defined_constants(true)['user']);

  6. 【JavaScript】jQuery绑定事件

    jquery中直接绑定事件:只能用在程序中一开始就存在的html代码 目标元素.click(function(){ }) jquery中间接绑定事件: 如果目标元素是js生成的,则需要间接绑定事件,用 ...

  7. java_servlet

    在servlet 解决中文乱码 response.setContentType("text/html;charset=utf-8"); //必须在getWrite()上面,不然依然 ...

  8. 零基础学html第一天

    html:超文本标记语言 unicode(UTF-8):万国码 <...>:标记标签   :空格 <br>:换行 <hr>:水平线 <p></p& ...

  9. 大话卷积神经网络（CNN）

      这几年深度学习快速发展,在图像识别.语音识别.物体识别等各种场景上取得了巨大的成功,例如AlphaGo击败世界围棋冠军,iPhone X内置了人脸识别解锁功能等等,很多AI产品在世界上引起了很大的 ...

  10. scrapy如何实现分布式爬虫

    使用scrapy爬虫的时候,记录一下如何分布式爬虫问题: 关键在于多台主机协作的关键:共享爬虫队列 主机:维护爬取队列从机:负责数据抓取,数据处理,数据存储 队列如何维护:Redis队列Redis 非 ...