前端的代码:

  1. <!-- 点赞 -->
  2. <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部分:

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

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

  1. public function zan(){
  2. $data[‘id‘]=isset($_POST[‘id‘])?intval(trim($_POST[‘id‘])):;
  3. $db=M(‘article‘);
  4. $res = $db->where($data)->setInc(‘zan‘);
  5. if($res){
  6. $this->ajaxReturn($data,‘ok‘,);
  7. exit();
  8. }else{
  9. $this->ajaxReturn($data,‘fail‘,);
  10. exit();
  11. }
  12. }

jquery.cookie.js:

  1. /*!
  2. * jQuery Cookie Plugin v1.4.1
  3. * https://github.com/carhartl/jquery-cookie
  4. *
  5. * Copyright 2006, 2014 Klaus Hartl
  6. * Released under the MIT license
  7. */
  8. (function (factory) {
  9. if (typeof define === 'function' && define.amd) {
  10. // AMD (Register as an anonymous module)
  11. define(['jquery'], factory);
  12. } else if (typeof exports === 'object') {
  13. // Node/CommonJS
  14. module.exports = factory(require('jquery'));
  15. } else {
  16. // Browser globals
  17. factory(jQuery);
  18. }
  19. }(function ($) {
  20.  
  21. var pluses = /\+/g;
  22.  
  23. function encode(s) {
  24. return config.raw ? s : encodeURIComponent(s);
  25. }
  26.  
  27. function decode(s) {
  28. return config.raw ? s : decodeURIComponent(s);
  29. }
  30.  
  31. function stringifyCookieValue(value) {
  32. return encode(config.json ? JSON.stringify(value) : String(value));
  33. }
  34.  
  35. function parseCookieValue(s) {
  36. if (s.indexOf('"') === ) {
  37. // This is a quoted cookie as according to RFC2068, unescape...
  38. s = s.slice(, -).replace(/\\"/g, '"').replace(/\\\\/g, '\\');
  39. }
  40.  
  41. try {
  42. // Replace server-side written pluses with spaces.
  43. // If we can't decode the cookie, ignore it, it's unusable.
  44. // If we can't parse the cookie, ignore it, it's unusable.
  45. s = decodeURIComponent(s.replace(pluses, ' '));
  46. return config.json ? JSON.parse(s) : s;
  47. } catch(e) {}
  48. }
  49.  
  50. function read(s, converter) {
  51. var value = config.raw ? s : parseCookieValue(s);
  52. return $.isFunction(converter) ? converter(value) : value;
  53. }
  54.  
  55. var config = $.cookie = function (key, value, options) {
  56.  
  57. // Write
  58.  
  59. if (arguments.length > && !$.isFunction(value)) {
  60. options = $.extend({}, config.defaults, options);
  61.  
  62. if (typeof options.expires === 'number') {
  63. var days = options.expires, t = options.expires = new Date();
  64. t.setMilliseconds(t.getMilliseconds() + days * 864e+);
  65. }
  66.  
  67. return (document.cookie = [
  68. encode(key), '=', stringifyCookieValue(value),
  69. options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
  70. options.path ? '; path=' + options.path : '',
  71. options.domain ? '; domain=' + options.domain : '',
  72. options.secure ? '; secure' : ''
  73. ].join(''));
  74. }
  75.  
  76. // Read
  77.  
  78. var result = key ? undefined : {},
  79. // To prevent the for loop in the first place assign an empty array
  80. // in case there are no cookies at all. Also prevents odd result when
  81. // calling $.cookie().
  82. cookies = document.cookie ? document.cookie.split('; ') : [],
  83. i = ,
  84. l = cookies.length;
  85.  
  86. for (; i < l; i++) {
  87. var parts = cookies[i].split('='),
  88. name = decode(parts.shift()),
  89. cookie = parts.join('=');
  90.  
  91. if (key === name) {
  92. // If second argument (value) is a function it's a converter...
  93. result = read(cookie, value);
  94. break;
  95. }
  96.  
  97. // Prevent storing a cookie that we couldn't decode.
  98. if (!key && (cookie = read(cookie)) !== undefined) {
  99. result[name] = cookie;
  100. }
  101. }
  102.  
  103. return result;
  104. };
  105.  
  106. config.defaults = {};
  107.  
  108. $.removeCookie = function (key, options) {
  109. // Must not alter options, thus extending a fresh object...
  110. $.cookie(key, '', $.extend({}, options, { expires: - }));
  111. return !$.cookie(key);
  112. };
  113.  
  114. }));

.

文章或者观点说说等点赞功能实现(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. Nodejs创建HTTPS服务器

    Nodejs创建HTTPS服务器 从零开始nodejs系列文章,将介绍如何利Javascript做为服务端脚本,通过Nodejs框架web开发.Nodejs框架是基于V8的引擎,是目前速度最快的Jav ...

  2. Java进程堆外内存(off heap)大小

    一.使用ByteBuffer.allocateDirect分配的off heap内存大小 本机进程 在Jvisualvm中安装 Mbeans插件.然后查看java.nio/BufferPool/dir ...

  3. 让mongodb执行js文件

    环境: Linux js代码: 循环删除表中的数据: clear-mongodb-dialog.js print('=========BEGIN=========='); for(var i of [ ...

  4. [Python] partial改变方法默认參数

    Python 标准库中 functools库中有非常多对方法非常有有操作的封装,partial Objects就是当中之中的一个,他是对方法參数默认值的改动. 以下就看下简单的应用測试. #!/usr ...

  5. oc73--NSArray使用

    // // main.m // NSArray和NSString之间转换 #import <Foundation/Foundation.h> int main(int argc, cons ...

  6. ASP.NET Web Projects

    https://msdn.microsoft.com/en-us/library/ywdtth2f.aspx The topics in this section describe how to cr ...

  7. 回顾2017Java 小结

    一.Java语言最流行 最近,调查结果已公布:Java 被评为最流行的语言,JavaScript 是最常用的语言,而 Go 被认为是最有前途的语言,Python 是最多人想去尝试的语言. https: ...

  8. windows 多mysql 实例

  9. Sublime Text 汉化插件

    https://blog.csdn.net/heyangyi_19940703/article/details/51869502 一.Sublime Text工具介绍: Sublime Text 是一 ...

  10. PCB 自动发送邮件---加入表格实现方法

    先看一下手动发送邮件内容加入表格操作(下图所示),直接复制Excel内容,再粘贴到邮件内容中,就是这么便捷,如果我们想自动发送邮件,也实现同样的效果如果实现呢,在这里介绍2种方法: 一.读取Excel ...