文章或者观点说说等点赞功能实现(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>标 ...
随机推荐
- Nodejs创建HTTPS服务器
Nodejs创建HTTPS服务器 从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Jav ...
- Java进程堆外内存(off heap)大小
一.使用ByteBuffer.allocateDirect分配的off heap内存大小 本机进程 在Jvisualvm中安装 Mbeans插件.然后查看java.nio/BufferPool/dir ...
- 让mongodb执行js文件
环境: Linux js代码: 循环删除表中的数据: clear-mongodb-dialog.js print('=========BEGIN=========='); for(var i of [ ...
- [Python] partial改变方法默认參数
Python 标准库中 functools库中有非常多对方法非常有有操作的封装,partial Objects就是当中之中的一个,他是对方法參数默认值的改动. 以下就看下简单的应用測试. #!/usr ...
- oc73--NSArray使用
// // main.m // NSArray和NSString之间转换 #import <Foundation/Foundation.h> int main(int argc, cons ...
- ASP.NET Web Projects
https://msdn.microsoft.com/en-us/library/ywdtth2f.aspx The topics in this section describe how to cr ...
- 回顾2017Java 小结
一.Java语言最流行 最近,调查结果已公布:Java 被评为最流行的语言,JavaScript 是最常用的语言,而 Go 被认为是最有前途的语言,Python 是最多人想去尝试的语言. https: ...
- windows 多mysql 实例
- Sublime Text 汉化插件
https://blog.csdn.net/heyangyi_19940703/article/details/51869502 一.Sublime Text工具介绍: Sublime Text 是一 ...
- PCB 自动发送邮件---加入表格实现方法
先看一下手动发送邮件内容加入表格操作(下图所示),直接复制Excel内容,再粘贴到邮件内容中,就是这么便捷,如果我们想自动发送邮件,也实现同样的效果如果实现呢,在这里介绍2种方法: 一.读取Excel ...