Ajax+jQuery+bootstrap+Java实现异步点赞功能,并限制点击次数

    xiaoxiao2021-04-12  31

    (下面截图是自己项目的截图) 当已经点赞后,鼠标再经过时,就会显示 "禁止的图标"  (相应的class 会变化) cursor:not-allowed 在很多的网站上有很多不同的点赞,我不知道他们是怎么实现的,下面我来分享一下我写的点赞实现,共大家参考下,

    这是我在一个项目抽取的代码,可能有些样式会发生变化,但是功能不会影响。

    网页代码:

    这个是根据数据库中是否可以点赞来限制能不能点的,strlist是从Java后台返回的一个请求。在这里取出点赞数和文章点赞的编号做为参数到Ajax上

    [html]  view plain  copy <span class="pull-right">       <c:choose>           <c:when test="${strlist.dzFlag==1}">               <a href="javascript:void(0)" onclick="praise('${strlist.id}','${strlist.dzCount}')"               class="btn btn-default btn-xs">                   赞                   <span id="praiseNo${strlist.id}">                       ${strlist.dzCount}                   </span>               </a>           </c:when>           <c:otherwise>               <a href="javascript:void(0)" class="btn btn-default btn-xs">                   赞                   <span id="strategyPraiseNo">                       ${strlist.dzCount}                   </span>               </a>           </c:otherwise>       </c:choose>   </span>  

    Ajax请求的Js脚本:

    [javascript]  view plain  copy <script type="text/javascript">       function praise(recordNo, praiseCount) {           $.ajax({               url: '${ctx}/country/pointPraise',               type: 'POST',               data: {                   'recordNo': recordNo               },               dataType: "JSON",               success: function(d) {                   if (d.success) {                       var strategyPraiseNo = parseInt(praiseCount) + 1;                       $('#praiseNo' + recordNo).html(strategyPraiseNo)                   }               },               error: function(XMLHttpRequest, textStatus, errorThrown) {                   bootbox.alert("无法连接服务器:" + textStatus);               }           });       }   </script>  

    Java代码:

    Dao类接口层

    [java]  view plain  copy <pre name="code" class="java">/**       * @Title: updateDzCount        * @Description:点击赞后更改赞的数量       * @param mapNo        * @author CHENJH       * @date 2015年6月27日       */       public void updateDzCount(HashMap<String, Object> mapNo);  

    Dao类实现层

    [java]  view plain  copy       @Override   ublic void updateDzCount(HashMap<String, Object> mapNo) {   this.update("updateDzCount", mapNo);  

    service类接口层

    [java]  view plain  copy /**       * @Title: updateDzCount       * @Description:点击赞后更改赞的数量       * @param recordNo       * @author CHENJH       * @date 2015年6月25日       */       public boolean updateDzCount(HashMap<String, Object> mapNo);  

    service类实现层

    [java]  view plain  copy @Override       public boolean updateDzCount(HashMap<String, Object> mapNo) {           logger.info("***** BlogServiceImpl.updateDzCount() method begin*****");           boolean flag = true;           try {               blogDao.updateDzCount(mapNo);           } catch (Exception e) {               logger.error("------updateDzCount error:", e);               e.printStackTrace();               return false;           }           logger.info("***** BlogServiceImpl.updateDzCount() method end*****");           return flag;          }   Action类处理层代码

    [java]  view plain  copy /**       * @Title: pointPraise       * @Description: 修改文章点赞       * @author CHENJH       * @date 2015年6月27日       */       @SkipCheck       @Action("pointPraise")       public void pointPraise() {           String recordNo = getParam("recordNo");// 获取文章信息编号           HashMap<String, Object> mapNo = getSessionValue("recordNoMap");// 得到文章点赞集合           Boolean bool = false;           if (mapNo != null) {               if (mapNo.get(recordNo) == null) {// 判断集合中是否存在改编号点赞                   mapNo.put(recordNo, recordNo);                   bool = true;               }           } else {// 未进行点赞               mapNo = new HashMap<String, Object>();               mapNo.put(recordNo, recordNo);               setSessionAttr("recordNoMap", mapNo);               bool = true;           }           if (bool) {// 可以点赞               mapNo.put("recordNo", recordNo);               // 点赞更新值               bool = blogService.updateDzCount(mapNo);           }           outputJsons("success", bool);          }   MyBatis3映射文件SQL语句

    [html]  view plain  copy <!--文章点赞后修改数量-->   <update id="updateDzCount" parameterType="map">        update TAB_攻略表 set           点赞次数=((select 点赞次数 from TAB_攻略表 where 记录编号 = #{recordNo,jdbcType=VARCHAR})+1)           where 记录编号 = #{recordNo,jdbcType=VARCHAR}    </update>  

    注:项目采用Maven开发,

    [java]  view plain  copy this.update("updateDzCount", mapNo);   上采用了封装的。  
    转载请注明原文地址: https://ju.6miu.com/read-668131.html

    最新回复(0)