前端的代码:

<!-- 点赞 -->
<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. Linux经常使用命令-文件搜索命令-文件搜索命令find

    命令名称:find 命令所在路径:/bin/find 语法:find [搜索范围] [匹配条件] 功能描写叙述:文件搜索 演示样例 find /etc - name init 在文件夹/etc 中查找 ...

  2. Handling bundles in activities and fragments

     Bundle is a useful data holder, which maps String values to various Parcelable types. So basicall ...

  3. C#使用oledb连接excel运行Insert Into语句出现“操作必须使用一个可更新的查询”的解决的方法

    我错误发生时的环境:Windows 7,Framework 4.0,Microsoft Office 2007,VS2010,c# WinForm. 部分代码: string strConn = &q ...

  4. ios 仿android gallery控件

    ios 上没有发现与android gallery类似的控件,因为在项目上须要使用到.採用UICollectionView实现 watermark/2/text/aHR0cDovL2Jsb2cuY3N ...

  5. iOS UITextView 高度随文字自己主动添加,并尾随键盘移动(二)

    上节地址:http://blog.csdn.net/lwjok2007/article/details/47401293 接着上节我们来实现 输入框自己主动调节高度 首先,我们得知道,要推断是否该换行 ...

  6. Android学习之仿QQ側滑功能的实现

    如今项目越来越多的应用了滑动删除的功能,Android本来遵循的是长按删除,IOS定制的是滑动删除,不可否认滑动删除确实在客户体验上要好一点,所以看了非常多关于仿QQ滑动删除的样例,还是感觉代码家的A ...

  7. CI框架下CSS和JS的路径问题

    注意:CI框架下的CSS和JS的引用必须放在框架外面,比如,可建立resource文件夹与application同级,用来封装CSS和JS. 在view层用resource里面CSS和JS可采用以下几 ...

  8. 预编译头文件pch

    1.         预编译头文件 作用:提高编译效率.预编译头文件(扩展名为.PCH),是为了提高编译效率而使用的一种方法,把一个工程中较稳定的代码预先编译好放在一个文件(.PCH)里.避免每次编译 ...

  9. 【POJ 2777】 Count Color

    [题目链接] http://poj.org/problem?id=2777 [算法] 线段树 [代码] #include <algorithm> #include <bitset&g ...

  10. 【POJ 1328】 Radar Installation

    [题目链接] http://poj.org/problem?id=1328 [算法] 每个雷达都位于笛卡尔坐标系的x轴上,因此,对于每个岛屿,我们都可以用勾股定理算出它的有效管辖区域 那么,问题就被转 ...