文章或者观点说说等点赞功能实现(thinkphp)
实现 功能 文章 或者 thinkphp 点赞 观点
2023-09-11 14:19:07 时间
前端的代码:
<!-- 点赞 --> <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)+1; 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‘])):0; $db=M(‘article‘); $res = $db->where($data)->setInc(‘zan‘); if($res){ $this->ajaxReturn($data,‘ok‘,1); exit(); }else{ $this->ajaxReturn($data,‘fail‘,0); 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('"') === 0) { // This is a quoted cookie as according to RFC2068, unescape... s = s.slice(1, -1).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 > 1 && !$.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+5); } 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 = 0, 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: -1 })); return !$.cookie(key); }; }));
.
相关文章
- 会员中心通过AJAX、JSON、PHP、MySql等技术实现注册和登录功能(1+X Web前端开发中级 例题)——初稿
- Oracle实现SQL的isnumeric 函数
- 【DCT-FPGA】verilog编程实现,基于FPGA的DCT变换实现
- 【FPGA人员检测】基于FPGA的人员检测,verilog编程实现,含硬件测试
- 微信小程序 - 实现文本展开与收起功能组件(初始时隐藏文字内容,当点击查看更多时展开)点击隐藏和点击显示 / 折叠与展开 / 大段文本内容过多,实现折叠与展开效果 ,超详细代码注释文章教程源码插件
- Python+ Flask轻松实现Mock Server
- 《C#多线程编程实战(原书第2版)》——3.5 实现一个取消选项
- DI容器Ninject在管理接口和实现、基类和派生类并实现依赖注入方面的实例
- [C++]:万字超详细讲解多态以及多态的实现原理(面试的必考的c++考点)
- 基于C++实现(控制台)物业维修管理系统【100010142】
- swift 用协议实现代理传值功能
- 移动网页如何实现发送短信和拨打电话的功能
- 实现基于Task的异步模式
- 使用node+vue实现简单的WebSocket聊天功能
- 【摸鱼神器】UI库秒变LowCode工具——列表篇(一)设计与实现
- 乌当区前三季度大数据产业实现产值60亿元
- js利用clipboardData在网页中实现截屏粘贴的功能
- 项目笔记:统计页面功能实现
- 【Unity3D编辑器扩展】Unity3D中实现SVN功能
- Springboot +mybatis-plus 实现公共字段自动填充
- shell实现倒计时功能
- 基于FPGA状态机的自动售货机功能实现
- Spring(十二)使用Spring的xml文件配置方式实现AOP
- 移植MonkeyRunner的图片对照和获取子图功能的实现-UiAutomator/Robotium篇
- Unity UGUI 之 实现按钮 Button 长按和双击的功能效果
- Unity 阿里云 之 SMS短信服务功能接入实现
- Spring AOP实现声明式事务代码分析
- Python实现pdf的一些功能
- C#.Net下的防抖-Debounce和节流阀-Throttle功能实现
- iOS AFNetwork实现Http相关操作(NetReachable、Get、Post、Upload、Download)