家居网购项目实现012

以下皆为部分代码，详见 https://github.com/liyuelian/furniture_mall.git

29.功能27-Ajax检验注册名

29.1需求分析/图解

用户注册时，后端通过验证，提示用户当前输入的用户名是否可用。

29.2思路分析

29.3代码实现

dao层和service层的方法在之前已经实现过了，这里不必再写

29.3.1web层

MemberServlet添加方法isExistUserName，该方法返回json格式的数据给前端

/**

 * 校验某个用户名是否已经存在数据库中

 *

 * @param req

 * @param resp

 * @throws ServletException

 * @throws IOException

 */

protected void isExistUserName(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

    //1.获取用户名

    String username = req.getParameter("username");

    //2.调用service

    boolean isExistUsername = memberService.isExistsUsername(username);

    //3.返回json格式[按照前端的需求]

    //{"isExist":false}

    //先使用最简单的拼接，一会使用可拓展的方式

    //String resultJson = "{\"isExist\":" + isExistUsername + "}";

    //=>将要返回的数据返回map=>json

    //使用map可以方便拓展

    HashMap<String, Object> resultMap = new HashMap<>();

    resultMap.put("isExist", isExistUsername);

    String resultJson = new Gson().toJson(resultMap);

    //4.返回json

    resp.getWriter().write(resultJson);

}

29.3.2前端

//给注册模块的用户名输入框绑定一个失去焦点事件

$("#username").blur(function () {

    //获取输入的用户名

    var username = this.value;

    //发出ajax请求（使用jquery的$.getJSON()）

    //jQuery.getJSON(url,data,success(data,status,xhr))

    $.getJSON(

        "memberServlet",

        //使用json格式发送数据

        {

            "action": "isExistUserName",

            "username": username,

        },

        function (data) {

            if (data.isExist) {

                $("span.errorMsg").text("用户名已经存在，不能使用");

            } else {

                $("span.errorMsg").text("用户名可用");

            }

        })

})

29.4完成测试

30.功能28-Ajax添加购物车

30.1需求分析/图解

当前每次添加家居到购物车方式，每次都需要sendRedirect()，会刷新整个页面，数据传输开销大

实际上添加家居到购物车，整个页面只需要刷新购物车的数量

因此使用ajax进行优化，只要刷新购物车的数量即可

30.2思路分析

30.3代码实现

30.3.1web层

CartServlet：

/**

 * 添加家居数据到购物车-Ajax方式

 *

 * @param req

 * @param resp

 * @throws ServletException

 * @throws IOException

 */

protected void addItemByAjax(HttpServletRequest req, HttpServletResponse resp) throws IOException {

    //得到添加的家居ID

    int id = DataUtils.parseInt(req.getParameter("id"), 0);

    //获取到id对应的Furn对象

    Furn furn = furnService.queryFurnById(id);

    if (furn == null || furn.getStock() == 0) {//如果没有对应的家居信息或者该家居库存为0

        return;//结束业务

    }

    //根据furn构建CartItem

    CartItem item =

            new CartItem(furn.getId(), furn.getName(), furn.getPrice(), 1, furn.getPrice());

    //从session获取cart对象

    Cart cart = (Cart) req.getSession().getAttribute("cart");

    if (null == cart) {//如果当前的session没有cart对象

        //创建一个cart对象

        cart = new Cart();

        //将其放入到session中

        req.getSession().setAttribute("cart", cart);

    }

    //将cartItem加入到cart对象

    cart.addItem(item);

    //添加完毕后，将当前购物车的商品数量以json形式的数据返回

    //前端得到json后进行局部刷新即可

    //1.规定json格式{"cartTotalcount,3"}

    Map<String, Object> resultMap = new HashMap<>();

    //2.创建map

    resultMap.put("cartTotalcount", cart.getTotalCount());

    //3.转为json

    String resultJson = new Gson().toJson(resultMap);

    resp.getWriter().write(resultJson);

}

30.3.2前端

customer/index.jsp

//给add to cart绑定事件

$("button.add-to-cart").click(function () {

    //获取到点击的furn-id

    var furnId = $(this).attr("furnId");

    //发出一个请求-添加家居=>后面改成ajax

    //location.href = "cartServlet?action=addItem&id=" + furnId;

    //改为ajax请求，得到数据进行局部刷新，解决刷新这个页面的效率低的问题

    //jQuery.getJSON(url,data,success(data,status,xhr))

    $.getJSON(

        "cartServlet",

        {

            "action": "addItemByAjax",

            "id": furnId

        },

        function (data) {

            //刷新局部 <span class="header-action-num">

            $("span.header-action-num").text(data.cartTotalCount)

        }

    )

})

30.3.3解决ajax请求转发失效的问题

测试上面的代码，会发现针对ajax的重定向和请求转发失效了，AuthFilter.java的权限拦截没有用了，即我们点击add to cart，后台服务没有响应，怎么办？

使用ajax向后台发送请求跳转页面无效的原因：

utils包WebUtils：

package com.li.furns.utils;

import javax.servlet.http.HttpServletRequest;

/**

 * @author 李

 * @version 1.0

 */

public class WebUtils {

    /**

     * 判断一个请求是否是ajax请求

     *

     * @param request

     * @return

     */

    public static boolean isAjaxRequest(HttpServletRequest request) {

        return "XMLHttpRequest".equals(request.getHeader("X-Requested-With"));

    }

}

AuthFilter：

package com.li.furns.filter;

import com.google.gson.Gson;

import com.li.furns.entity.Member;

import com.li.furns.utils.WebUtils;

import javax.servlet.*;

import javax.servlet.http.HttpServletRequest;

import java.io.IOException;

import java.util.Arrays;

import java.util.HashMap;

import java.util.List;

/**

 * 这是用于权限验证的过滤器，对指定的url进行验证

 * 如果登录过，就放行；如果没有登录，就返回登录页面

 *

 * @author 李

 * @version 1.0

 */

public class AuthFilter implements Filter {

    //后面我们把要排除的url放入到excludedUrls中

    private List<String> excludedUrls;

    public void init(FilterConfig config) throws ServletException {

        //获取到配置的excludedUrls

        String strExcludedUrls = config.getInitParameter("excludedUrls");

        //进行分割

        String[] splitUrl = strExcludedUrls.split(",");

        //将splitUrl转成List,赋给excludedUrls

        excludedUrls = Arrays.asList(splitUrl);

        System.out.println("excludedUrls=>" + excludedUrls);

    }

    public void destroy() {

    }

    @Override

    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException {

        //权限验证

        HttpServletRequest req = (HttpServletRequest) request;

        //得到请求的url

        String url = req.getServletPath();

        //判断是否要验证

        if (!excludedUrls.contains(url)) {//如果url不在配置的规则中，就进行校验

            //得到session中的member对象

            Member member = (Member) req.getSession().getAttribute("member");

            if (member == null) {//说明用户没有登录过

                //先判断该请求是否为Ajax请求

                if (!WebUtils.isAjaxRequest(req)) {//不是ajax请求

                    //转发到登录页面

                    //不要使用重定向，因为重定向的url符合过滤器规则时也会被拦截，

                    //如果设置不合理就会出现 请求无线循环重定向的 情况

                    req.getRequestDispatcher("/views/member/login.jsp").forward(request, response);

                } else {//如果是ajax请求

                    //以json格式返回一个url

                    HashMap<String, Object> resultMap = new HashMap<>();

                    resultMap.put("url", "views/member/login.jsp");

                    String resultJson = new Gson().toJson(resultMap);

                    response.getWriter().write(resultJson);

                }

                return;//返回

            }

        }

        //否则就放行

        chain.doFilter(request, response);

    }

}

修改前端接口customer/index.jsp

//给add to cart绑定事件

$("button.add-to-cart").click(function () {

    //获取到点击的furn-id

    var furnId = $(this).attr("furnId");

    //发出一个请求-添加家居=>后面改成ajax

    //location.href = "cartServlet?action=addItem&id=" + furnId;

    //改为ajax请求，得到数据进行局部刷新，解决刷新这个页面的效率低的问题

    //jQuery.getJSON(url,data,success(data,status,xhr))

    $.getJSON(

        "cartServlet",

        {

            "action": "addItemByAjax",

            "id": furnId

        },

        function (data) {

            if (data.url == undefined) {

                //说明没有返回url,过滤器没有让跳转到登录页面，即说明已经登录过了

                $("span.header-action-num").text(data.cartTotalCount);

            } else {

                //否则说明当前服务器返回了url，要求定位

                location.href = data.url;

            }

        }

    )

})

day13-功能实现12

家居网购项目实现012

29.功能27-Ajax检验注册名

29.1需求分析/图解

29.2思路分析

29.3代码实现

29.3.1web层

29.3.2前端

29.4完成测试

30.功能28-Ajax添加购物车

30.1需求分析/图解

30.2思路分析

30.3代码实现

30.3.1web层

30.3.2前端

30.3.3解决ajax请求转发失效的问题

30.4完成测试

31.功能29-上传/更新家居图片

31.1需求分析/图解

31.2思路分析

31.3代码实现

31.4完成测试

day13-功能实现12的相关教程结束。

相关推荐

rest framwork 4 分页功能

微信开放平台PC端扫码登录功能个人总结

[Android Pro] Android 4.1 使用 Accessibility实现免Root自动批量安装功能

PHP语言学习之php做图片上传功能

Apache hudi 核心功能点分析

android wear开发之：增加可穿戴设备功能到通知中 - Adding Wearable Features to Notifications

用c++开发基于tcp协议的文件上传功能

Mysql8.0为什么取消了缓存查询的功能