使用mysql、php和Ajax实现点赞功能

要实现点赞功能,有多种实现方式,本文总结利用Ajax,php和mysql来实现点赞的数据的功能。具体步骤如下:

一、写好页面中的HTML代码:

0good+10good+10good+10good+1

二、写javascript

1、实现上面的button的点击事件goodplus

   

var span = document.getElementsByTagName('span');//获取存放点赞数的dom
    var num;    //点赞数
    var flag = 0;    //不同情况的标记
    
    function goodplus(gindex){
        flag = 1;
        num = parseInt(span.item(gindex-1).innerHTML);
        if(checkcookie(gindex) =&#
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
1. 创建点赞表 在MySQL数据库中创建一个点赞表,用于存储点赞信息。该表的结构可以如下所示: ```sql CREATE TABLE `like_info` ( `id` int(11) NOT NULL AUTO_INCREMENT, `user_id` int(11) NOT NULL, `target_id` int(11) NOT NULL, `type` int(11) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8; ``` 其中,id为点赞记录的唯一标识,user_id为点赞用户的id,target_id为点赞目标的id,type为点赞类型,例如点赞的是文章、评论还是其他类型的内容。 2. 实现点赞功能 在Java中使用MyBatis框架实现点赞功能,需要创建Mapper接口和XML文件来实现数据库操作。 (1)创建Mapper接口 在Mapper接口中定义点赞功能的方法,例如: ```java public interface LikeMapper { /** * 根据用户id和目标id查询点赞记录 * @param userId 用户id * @param targetId 目标id * @return 点赞记录 */ LikeInfo getLikeInfo(@Param("userId") int userId, @Param("targetId") int targetId); /** * 添加点赞记录 * @param likeInfo 点赞记录 * @return 影响的行数 */ int addLikeInfo(LikeInfo likeInfo); /** * 删除点赞记录 * @param id 点赞记录的id * @return 影响的行数 */ int deleteLikeInfo(int id); } ``` (2)创建XML文件 在XML文件中实现Mapper接口中定义的方法,例如: ```xml <mapper namespace="com.example.mapper.LikeMapper"> <resultMap id="likeInfoMap" type="com.example.entity.LikeInfo"> <id column="id" property="id"/> <result column="user_id" property="userId"/> <result column="target_id" property="targetId"/> <result column="type" property="type"/> </resultMap> <select id="getLikeInfo" resultMap="likeInfoMap"> SELECT * FROM like_info WHERE user_id = #{userId} AND target_id = #{targetId} </select> <insert id="addLikeInfo" parameterType="com.example.entity.LikeInfo"> INSERT INTO like_info(user_id, target_id, type) VALUES(#{userId}, #{targetId}, #{type}) </insert> <delete id="deleteLikeInfo"> DELETE FROM like_info WHERE id = #{id} </delete> </mapper> ``` 3. 在JSP页面中实现点赞功能 在JSP页面中实现点赞功能,需要使用Ajax技术向服务器发送请求,并根据服务器返回的数据更新页面上的点赞状态和点赞数。 (1)向服务器发送点赞请求 可以在页面上添加一个点赞按钮,当用户点击该按钮时,使用Ajax向服务器发送点赞请求。例如: ```javascript function like() { $.ajax({ type: "POST", url: "/like", data: { targetId: ${targetId}, type: ${type} }, dataType: "json", success: function (result) { if (result.code == 200) { // 更新点赞状态和点赞数 } else { alert(result.msg); } }, error: function () { alert("点赞失败!"); } }); } ``` 其中,targetId和type是要点赞的目标的id和类型,可以从后端传递到页面上。 (2)处理点赞请求 后端可以使用Spring MVC框架来处理点赞请求,首先需要定义一个Controller来处理请求。例如: ```java @RestController public class LikeController { @Autowired private LikeService likeService; @PostMapping("/like") public Result like(@RequestParam("targetId") int targetId, @RequestParam("type") int type, HttpSession session) { User user = (User) session.getAttribute("user"); if (user == null) { return Result.fail("请先登录!"); } LikeInfo likeInfo = likeService.getLikeInfo(user.getId(), targetId); if (likeInfo != null) { return Result.fail("您已经点过赞了!"); } likeInfo = new LikeInfo(); likeInfo.setUserId(user.getId()); likeInfo.setTargetId(targetId); likeInfo.setType(type); likeService.addLikeInfo(likeInfo); return Result.success(); } } ``` 在Controller中,首先判断用户是否已经登录,如果没有登录则返回错误信息。然后根据用户id和目标id查询数据库,判断用户是否已经点过赞,如果已经点过赞则返回错误信息。最后如果用户没有点过赞,则添加一条点赞记录到数据库中,并返回成功信息。 (3)更新点赞状态和点赞数 当服务器返回成功信息时,可以通过JavaScript来更新页面上的点赞状态和点赞数。例如: ```javascript var likeButton = $("#likeButton"); if (likeButton.hasClass("liked")) { likeButton.removeClass("liked"); likeButton.attr("title", "点赞"); var likeCount = parseInt($("#likeCount").text()) - 1; $("#likeCount").text(likeCount); } else { likeButton.addClass("liked"); likeButton.attr("title", "取消赞"); var likeCount = parseInt($("#likeCount").text()) + 1; $("#likeCount").text(likeCount); } ``` 在页面上,点赞按钮可以使用CSS样式来实现点赞状态的切换。例如: ```css .like-button { display: inline-block; width: 20px; height: 20px; background: url("/images/like.png") no-repeat center center; background-size: 20px 20px; cursor: pointer; } .like-button.liked { background: url("/images/liked.png") no-repeat center center; background-size: 20px 20px; } ``` 当用户点击点赞按钮时,如果按钮已经有liked类,则表示用户已经点过赞,此时需要将liked类移除,并且将点赞数减1。如果按钮没有liked类,则表示用户还没有点赞,此时需要添加liked类,并且将点赞数加1。同时,还需要将按钮的title属性修改为“点赞”或“取消赞”。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值