点赞功能（ajax+jsp+servlet)

来源：互联网发布：为知云笔记使用教程编辑：程序博客网时间：2024/06/10 01:52

点赞功能的简单实现

主要是讲解一下点赞功能实现的思路。

首先实现页面端js控制点赞数的增减，这一步很简单。按钮点击事件绑定，控制点赞数的增减。
在数据库中设计一个表（praise_tab）,表的列（文章点赞，评论点赞）
id INT PRIMARY KEY AUTO_INCREMENT,
userid VARCHAR(20) NOT NULL,
articleid INT DEFAULT 0,
commentid INT DEFAULT 0
主要是，用户主键，文章主键，评论主键，形成一个记录，当用户点赞后插入一条数据。文章id，评论id默认为0，区分是对文章点赞还是对评论点赞。
ajax实现对后台提交数据与返回判断值。点击按钮触发priase函数，ajax向后台提交，userId,articleId,commentId,其中给文章点赞，则commentId为0,反之同样如此。

以下是简单实现代码

js: //praiseN,pra为span的idfunction priase(articleid,commentid,praiseN,pra){                var type = "json";                var praiseNum = parseInt(document.getElementById(praiseN).innerHTML);                 $.ajax({                    url:"${pageContext.request.contextPath}/RecivePraiseServlet?sendType=post&dataType="+type,                    data:{"anthorid":'${sessionScope.user.userId}',"articleid":articleid,"commentid":commentid},                    type: "post",                    dataType:type,                    success:function(data){                        if("json" == type){                            if(data != undefined && data != null){                                var flag = data.praiseflag;  // 1已点过赞                                if(flag == 0){                                    document.getElementById(praiseN).innerHTML = praiseNum + 1;                                    $('#'+pra).css("color","red");                                }else if(flag == 1){                                    alert("你已经点过赞了！");                                    $('#'+pra).css("color","red");                                }                            }                        }                    }                });            }body:<a href="javascript:void(0)"  onclick="priase(${Article.aid },0,'praiseOne','praiseTwo')"><span id="praiseTwo">赞</span></a><span id="praiseOne" >${Article.articlePraiseNum }</span>servlet:public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException {        StringBuffer sb = new StringBuffer("");        PraiseService praises = new PraiseServiceImpl();        ArticleService ars = new ArticleServiceImpl();        CommentService cms = new CommentServiceImpl();        request.setCharacterEncoding("utf-8");        String userId = request.getParameter("anthorid");        String articleId = request.getParameter("articleid");        String commentId = request.getParameter("commentid");        String dataType = request.getParameter("dataType");        String sendType = request.getParameter("sendType");        if ("json".equals(dataType)){            if(articleId != null && !articleId.equals("0")){                //查找是否有对文章点赞记录                Praise pr = praises.findArticlePraise(Integer.parseInt(articleId), userId);                if(pr != null){                    sb.append("{");                    sb.append("\"praiseflag\":1");                    sb.append("}");                }else{                    ars.addPraiseNum(Integer.parseInt(articleId));                    praises.addArticlePriase(Integer.parseInt(articleId), userId);                    sb.append("{");                    sb.append("\"praiseflag\":0");                    sb.append("}");                }            }            if(commentId != null && !commentId.equals("0")){                //查找是否有对评论点赞记录                Praise pr = praises.findCommentPraise(Integer.parseInt(commentId), userId);                if(pr != null){                    sb.append("{");                    sb.append("\"praiseflag\":1");                    sb.append("}");                }else{                    cms.addCommentNum(Integer.parseInt(commentId));                    praises.addCommentPraise(Integer.parseInt(commentId), userId);                    sb.append("{");                    sb.append("\"praiseflag\":0");                    sb.append("}");                }            }            response.setContentType("text/html;charset=utf-8");        }        PrintWriter out = response.getWriter();        out.println(sb.toString());        out.flush();        out.close();    }

代码比较简单，主要是思路很重要！

阅读全文

0 0