前端的代码:

<!-- 点赞 -->
<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. HDU 5015 233Matrix (构造矩阵)

    233 Matrix Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others) Tota ...

  2. Unity3D-碰撞測试

    碰撞測试这个再游戏的开发中是非常有必要的.当敌人的攻击的时候,发生碰撞这时候就会造成一定的伤害,因此我们须要依据受到的伤害对用户的生命值进行控制,因此碰撞的測试是 我们在游戏的开发过程中须要的一种比較 ...

  3. 6.6 random--伪随机数的生成

    本模块提供了生成要求安全度不高的随机数.假设须要更高安全的随机数产生.须要使用os.urandom()或者SystmeRandom模块. random.seed(a=None, version=2) ...

  4. apt --fix-broken install

    1 自动修复安装出现broken的package 但是,如果还是失败的话,就需要手动进行干预了.

  5. MT4调用Windows API进行文件读写操作

    /*导入相关函数*/ #import "kernel32.dll" int CreateDirectoryW(string directoryName,int type); int ...

  6. bzoj 1022 小约翰的游戏John

    题目大意: n堆石子,两个人轮流取石子,每个人取的时候,可以随意选择一堆石子 在这堆石子中取走任意多的石子,但不能一粒石子也不取,取到最后一粒石子的人算输 思路: 首先当每堆石子数都为1时,偶数为先手 ...

  7. bzoj1494

    这道题不仅得看俞华程的论文,还得看陈丹琦的论文,否则是不可能做出来的.因为难点在构造矩阵上. 构造矩阵困难在如何表示状态,因为树不能有环,也不能不连通,这里我们引入了最小表示法来表示连续k个点的连通性 ...

  8. Systick 更新

    之前写的systick_config(loadvalue) 根据系统时钟为72Mhz来写的,如果system clock不是72MHz怎么办? 重新写了一下,先获取,系统时钟频率. //参数为ms v ...

  9. PCB Windows Petya(永恒之蓝)勒索病毒补丁检测代码

    公司内部电脑招受到新的勒索病毒Petya(永恒之蓝)攻击,直接导致受攻击的电脑系统崩贵无法启动,这次勒索病毒攻击影响范围之广,IT,人事,工程,生产,物控等部门都无一幸免,对整个公司运转产生了非常严重 ...

  10. J20170618-hm

    番兵(ばんぺい) 哨兵 後始末 善后