文章或者观点说说等点赞功能实现(thinkphp)
前端的代码:
<!-- 点赞 -->
<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)的更多相关文章
- 基于微信小程序的用户列表点赞功能
代码地址如下:http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4.想 ...
- 全栈项目|小书架|服务器端-NodeJS+Koa2 实现点赞功能
效果图 接口分析 通过上面的效果图可以看出,点赞入口主要是在书籍的详情页面. 而书籍详情页面,有以下几个功能是和点赞有关的: 获取点赞状态 点赞 取消点赞 所以项目中理论上与点赞相关的接口就以上三个. ...
- 基于SpringBoot如何实现一个点赞功能?
基于SpringBoot如何实现一个点赞功能? 解析: 基于 SpringCloud, 用户发起点赞.取消点赞后先存入 Redis 中,再每隔两小时从 Redis 读取点赞数据写入数据库中做持久化存储 ...
- ajax点赞功能
- JavaScript实现评论点赞功能
通过分析评论功能的逻辑关系,学会如何使用JavaScript实现评论.回复.点赞等各种功能 1.学会JavaScript处理日期和时间. 2.掌握Dom操作中的添加/删除子节点方法. 3.使用setT ...
- JavaScript cookie操作实现点赞功能
JavaScript cookie操作实现点赞功能 参考实现原理,但是代码不够简洁,简洁代码参考:js操作cookie 实现一个点赞功能十分简单,主要问题在于不能重复点赞. 若是一个有用户的网站,可 ...
- 全栈项目|小书架|微信小程序-点赞功能实现
微信小程序端的点赞功能其实没什么好介绍的,无非就是调用接口改变点赞状态和点赞数量.需要注意的是取消点赞时的处理,我这里为了减少服务器接口的调用,直接本地存一个变量,修改这里的变量值即可. 由于源码都相 ...
- Day8-微信小程序实战-交友小程序-首页用户列表渲染及多账号调试及其点赞功能的实现
在这之前已经把编辑个人的所有信息的功能已经完成了 之后先对首页的列表搞动态的,之前都是写死的静态 1.之前都是把好友写死的,现在就在js里面定义一个数组,用循环来动态的绑定 在onReady中定义,取 ...
- 文章点赞功能(Ajax)
一.文章点赞样式构建 1.将base.html的css样式改为外部引入 将base.html的内嵌样式删除,改为使用 HTML 头部的 <head> 标签对中使用<link>标 ...
随机推荐
- 一份关于jvm内存调优及原理的学习笔记(转)
JVM 一.虚拟机的基本结构 1.jvm整体架构 类加载子系统:负责从文件系统或者网络中加载class信息,存入方法区中. 方法区(Perm):存放加载后的class信息,包括静态方法,jdk1.6以 ...
- [JavaEE] Bootstrapping a JavaEE Application
To bootsrap the application use the following Maven archetype: mvn -DarchetypeGroupId=org.codehaus.m ...
- 编程算法 - 求1+2+...+n(函数继承) 代码(C++)
求1+2+...+n(函数继承) 代码(C++) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 求1+2+...+n, 要求不能使用乘除法\for\whi ...
- HDU 1241 Oil Deposits (DFS)
题目链接:Oil Deposits 解析:问有多少个"@"块.当中每一个块内的各个"@"至少通过八个方向之中的一个相邻. 直接从"@"的地方 ...
- Ubuntu中取消秘钥环
1.打开应用程序->附件->password和加密密钥(或者在终端中输入 seahorse) 2.切换到password选项卡,会看到一个password密钥环 3.右击->更改pa ...
- hdu 1671 Phone List 字典树
// hdu 1671 Phone List 字典树 // // 题目大意: // // 有一些电话号码的字符串长度最多是10,问是否存在字符串是其它字符串的前缀 // // // 解题思路: // ...
- Linux对外连接port数限制
左右时,開始大量抛例如以下异常: java.net.BindException:Cannot assign requested address atsun.nio.ch.Net.connect0(Na ...
- 关于PowerDesigner导出数据库表到word文档
关于PowerDesigner导出数据库表到word文档 一.查看全部模板: powerdesigner默觉得我们提供了非常多的模版,在工具栏中选择[Report(报告)--->Report T ...
- C 符号表导出
编译符号表导出示例: 使用GCC编译链接参数--version-script 控制动态符号表,如想 使用链接参数 --retain-symbols-file 控制静态符号表,--version-scr ...
- XAML实例教程系列 - 对象和属性(二)
XAML实例教程系列 - 对象和属性 2012-05-22 14:18 by jv9, 1778 阅读, 6 评论, 收藏, 编辑 在前一篇已经介绍XAML概念:“XAML语言是Extensible ...