前端的代码:

<!-- 点赞 -->
<div class='btm'><a class='zan' id="{$article.id}" href="javascript:void(0);">赞(<span>{$article.likescount}</span>)</a></div>

当然数据的处理用ajax,不过先要引入jquery和jquery.cookie.js,这个就自行百度下载吧。前端会用cookie来限制重复点赞的效果。

js部分:

$(".zan").live('click',function(){
var Oa=$(this);
var id=Oa.attr('id');//获取id属性
var vl=Oa.find("span").text();
vl=parseInt(vl)+;
if(!$.cookie(id)){
// console.log('没有缓存');
$.post("{:U("Article/zan")}",{id:id},function(data){
console.log(data)
if(data.status=='ok'){
alert('点赞+1');//模拟异步数据加1
$.cookie(id,id);//改变flag初始值,确保函数只执行一次
Oa.find("span").text(vl);//页面元素加1
}
},'json');
}else{
// console.log('有缓存');
alert('您已经点过赞了!');
}
return false;
})

后端接收数据:IndexController.class.php

public function zan(){
$data[‘id‘]=isset($_POST[‘id‘])?intval(trim($_POST[‘id‘])):;
$db=M(‘article‘);
$res = $db->where($data)->setInc(‘zan‘);
if($res){
$this->ajaxReturn($data,‘ok‘,);
exit();
}else{
$this->ajaxReturn($data,‘fail‘,);
exit();
}
}

jquery.cookie.js:

/*!
* jQuery Cookie Plugin v1.4.1
* https://github.com/carhartl/jquery-cookie
*
* Copyright 2006, 2014 Klaus Hartl
* Released under the MIT license
*/
(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD (Register as an anonymous module)
define(['jquery'], factory);
} else if (typeof exports === 'object') {
// Node/CommonJS
module.exports = factory(require('jquery'));
} else {
// Browser globals
factory(jQuery);
}
}(function ($) { var pluses = /\+/g; function encode(s) {
return config.raw ? s : encodeURIComponent(s);
} function decode(s) {
return config.raw ? s : decodeURIComponent(s);
} function stringifyCookieValue(value) {
return encode(config.json ? JSON.stringify(value) : String(value));
} function parseCookieValue(s) {
if (s.indexOf('"') === ) {
// This is a quoted cookie as according to RFC2068, unescape...
s = s.slice(, -).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
} try {
// Replace server-side written pluses with spaces.
// If we can't decode the cookie, ignore it, it's unusable.
// If we can't parse the cookie, ignore it, it's unusable.
s = decodeURIComponent(s.replace(pluses, ' '));
return config.json ? JSON.parse(s) : s;
} catch(e) {}
} function read(s, converter) {
var value = config.raw ? s : parseCookieValue(s);
return $.isFunction(converter) ? converter(value) : value;
} var config = $.cookie = function (key, value, options) { // Write if (arguments.length > && !$.isFunction(value)) {
options = $.extend({}, config.defaults, options); if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setMilliseconds(t.getMilliseconds() + days * 864e+);
} return (document.cookie = [
encode(key), '=', stringifyCookieValue(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
} // Read var result = key ? undefined : {},
// To prevent the for loop in the first place assign an empty array
// in case there are no cookies at all. Also prevents odd result when
// calling $.cookie().
cookies = document.cookie ? document.cookie.split('; ') : [],
i = ,
l = cookies.length; for (; i < l; i++) {
var parts = cookies[i].split('='),
name = decode(parts.shift()),
cookie = parts.join('='); if (key === name) {
// If second argument (value) is a function it's a converter...
result = read(cookie, value);
break;
} // Prevent storing a cookie that we couldn't decode.
if (!key && (cookie = read(cookie)) !== undefined) {
result[name] = cookie;
}
} return result;
}; config.defaults = {}; $.removeCookie = function (key, options) {
// Must not alter options, thus extending a fresh object...
$.cookie(key, '', $.extend({}, options, { expires: - }));
return !$.cookie(key);
}; }));

.

文章或者观点说说等点赞功能实现(thinkphp)的更多相关文章

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

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

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

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

  3. 基于SpringBoot如何实现一个点赞功能?

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

  4. ajax点赞功能

  5. JavaScript实现评论点赞功能

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

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

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

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

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

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

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

  9. 文章点赞功能(Ajax)

    一.文章点赞样式构建 1.将base.html的css样式改为外部引入 将base.html的内嵌样式删除,改为使用 HTML 头部的 <head> 标签对中使用<link>标 ...

随机推荐

  1. Python基础--高速改造:字符串

    Python的字符串值得一说. 先看: >>>"Hello world!" 'Hello world!' 我们写是双引號,可是打印出来后是单引號. 差别何在? 答 ...

  2. Win7 如何卸载IE9

    1 控制面板,卸载程序 2 查看已安装的更新   3 右击对应更新,选择卸载.

  3. 【bzoj1821】[JSOI2010]Group 部落划分 Group

    题目大意:要求把n个点分成m块,使得每一块之间的距离的最小值最大 n^2枚举所有点之间距离 然后sort一下 并查集维护连通关系 一开始e[]开MAXN然后WA了测了4ms,然后开MAXN<&l ...

  4. 一些SQL高级函数

    一些SQL高级函数 Posted on 2010-08-08 21:34 moss_tan_jun 阅读(311) 评论(0) 编辑 收藏 长度与分析用 datalength(Char_expr) 返 ...

  5. C语言内存管理总结

    更新: 2018/01/09 增加free() 更新: 2018/04/13 修改部分文字与表格背景色与默认颜色相同 //# TODO: malloc, alloc, calloc, realloc ...

  6. ecshop的一些东西,来看看

    \includes\lib_commom.php =>公用函数库 \includes\lib_main.php =>前台公用函数库 \includes\lib_init.php => ...

  7. 面试题:InnoDB中一棵B+树能存多少行数据?

    阅读本文大概需要 5 分钟. 作者:李平 | 来源:个人博客 一.InnoDB 一棵 B+ 树可以存放多少行数据? InnoDB 一棵 B+ 树可以存放多少行数据? 这个问题的简单回答是:约 2 千万 ...

  8. 基于Spark Streaming预测股票走势的例子(二)

    上一篇博客中,已经对股票预测的例子做了简单的讲解,下面对其中的几个关键的技术点再作一些总结. 1.updateStateByKey 由于在1.6版本中有一个替代函数,据说效率比较高,所以作者就顺便研究 ...

  9. 基于Spark Streaming预测股票走势的例子(一)

    最近学习Spark Streaming,不知道是不是我搜索的姿势不对,总找不到具体的.完整的例子,一怒之下就决定自己写一个出来.下面以预测股票走势为例,总结了用Spark Streaming开发的具体 ...

  10. JVM-垃圾回收器

    目录 垃圾收集器 Serial收集器 Serial Old 收集器 ParNew 收集器 Parallel Scavenge 收集器 (并行清除) /'pærəlɛl/ /'skævɪndʒ/ Par ...