文章或者观点说说等点赞功能实现(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>标 ...
随机推荐
- HDU 1973
Prime Path Time Limit: 5000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- Solr基础教程之solrconfig.xml(三)
前面介绍过schema.xml的一些配置信息,本章介绍solrconfig.xml的配置,以及怎样安装smartcn分词器和IK分词器,并介绍主要的查询语法. 1. solr配置solrconfig. ...
- 运行Java -jar somefile.jar时发生了什么(二)
(6)Java.c中的LoadMainClass 位置jdk/src/share/bin/java.c 该方法负责载入main函数所在的类. 该方法首先载入sun.launcher.LauncherH ...
- 在datagrid中的toolbar添加输入框
转自:https://blog.csdn.net/u013178480/article/details/72358551 <code class="language-html" ...
- Hyper-v 3.0 安装centos6.3
Hyper-v 3.0 安装centos6.3 我们说到hyper-v3.0就想到了windows8.windows2012:我们也知道在windows8.windows2012上安装centos系统 ...
- PCB SQL SERVER 字段模糊匹配个数 实现方法
今天工程系统给到加投加投组件的数据规则修改,遇到需将一个字段模糊匹配的个数统计 这类需求要平时应该很少遇到了,这里将此方法分享出来, 一.需求如下 例子:itempara字段中的内容是: IVH板 铜 ...
- Mechanize抓取数据【Ruby】
创建: 2017/08/05 更新: 2018/01/08 修正: ele_inner_text -> ele.inner_text 补充: ...
- struts表单验证xml配置文件
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE validators PUBLIC &quo ...
- codevs3327选择数字(单调队列优化)
3327 选择数字 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题目描述 Description 给定一行n个非负整数a[1]..a[n].现 ...
- codevs3370 选学霸(背包dp,并查集)
3372 选学霸 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 大师 Master 题目描述 Description 老师想从N名学生中选M人当学霸,但有K对人实力相 ...