旅游网案例：旅游线路收藏功能

一、需求分析

当页面加载完成后，发送 Ajax 请求，获取用户是否收藏的标记。然后根据标记，展示不同的按钮样式。

二、RouteServlet.java

public void isFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        1.获取线路id
        String rid = request.getParameter("rid");
//        2.获取当前登录的用户 user
        User user = (User) request.getSession().getAttribute("user");
        int uid;//用户id
        if (user == null) {
//            用户尚未登录
            uid = 0;
        } else {
//            用户已经登录
            uid = user.getUid();
        }
//        3.调用 FavoriteService 查询是否收藏
        boolean flag = favoriteService.isFavorite(rid, uid);
//        4.写回客户端
        writeValue(flag, response);
    }

三、改变收藏样式按钮

$(function () {
    //    发送请求，判断用户是否收藏过该线路
        var rid=getParameter("rid");
        $.get("route/isFavorite",{rid:rid},function (flag) {
            if (flag){
            //    用户收藏过，就设置收藏按钮的样式
                $("#favorite").addClass("already");
                $("#favorite").attr("disabled","disabled");
            }else {
            //    用户没有收藏
            }
        })
    })

四、收藏次数的动态展示

其实是随着页面展示的，所以应该放到 RouteServiceImpl 中调用Dao方法根据rid获得收藏次数给 route 的 Count 属性赋值

//        4.查询收藏次数
        int count = favoriteDao.findCountByRid(route.getRid());
        route.setCount(count);

五、点击按钮收藏线路

 public void addFavorite(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//        1.获取线路id
        String rid = request.getParameter("rid");
//        2.获取当前登录的用户 user
        User user = (User) request.getSession().getAttribute("user");
        int uid;//用户id
        if (user == null) {
//            用户尚未登录,交由html页面处理
            return;
        } else {
//            用户已经登录
            uid = user.getUid();
        }
//        3.调用 FavoriteService 添加
        favoriteService.add(rid,uid);
    }

注意添加的SQL语句：

public void add(int rid, int uid) {
        String sql = "insert into tab_favorite values(?,?,?)";
        template.update(sql,rid,new Date(),uid);
    }

六、点击后页面自动刷新同时保证收藏按钮不能再点击

$(function () {

        //    发送请求，判断用户是否收藏过该线路
        var rid = getParameter("rid");
        $.get("route/isFavorite", {rid: rid}, function (flag) {
            if (flag) {
                //    用户收藏过，就设置收藏按钮的样式
                $("#favorite").addClass("already");
                $("#favorite").attr("disabled", "disabled");
                //删除按钮的点击事件
                $("#favorite").removeAttr("onclick");
            } else {
                //    用户没有收藏
            }
        })
    });

//点击收藏按钮触发的方法
    function addFavorite() {
        var rid = getParameter("rid");
        //    1.判断用户是否登录
        $.get("user/findOne", {}, function (user) {
            if (user) {
                //    用户登录了，添加功能
                $.get("route/addFavorite", {rid: rid}, function () {
                    //    代码刷新页面
                    location.reload();
                })
            } else {
                //    用户没有登录
                alert("您尚未登录，请登录");
                location.href = "http://localhost/travel/login.html";
            }
        })
    }