• 文章或者观点说说等点赞功能实现(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)+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);
        };
    
    }));

    .

  • 相关阅读:
    H5及微信中唤起app的解决方案
    html5统计数据上报API:SendBeacon
    基于webpack4的react开发环境配置
    electron-vue开发爬坑指南
    利用git 进行多人协作开发
    js 性能优化利器:prepack
    各种渲染方式对比解析
    Nuxt.js部署应用的方式
    微信小程序--data的赋值与取值
    甘超波:什么是个人定位
  • 原文地址:https://www.cnblogs.com/fightjianxian/p/8975348.html
Copyright © 2020-2023  润新知