书城项目-使用AJAX请求验证用户名是否可用、书城项目-使用AJAX请求修改添加商品到购物车的实现

3.1、使用 AJAX 验证用户名是否可用

UserServlet 程序中 ajaxExistsUsername 方法：

    protected void ajaxExistsUsername(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        // 获取请求的参数username
        String username = req.getParameter("username");
        // 调用userService.existsUsername();
        boolean existsUsername = userService.existsUsername(username);
        // 把返回的结果封装成为map对象
        Map<String,Object> resultMap = new HashMap<>();
        resultMap.put("existsUsername",existsUsername);

        Gson gson = new Gson();
        String json = gson.toJson(resultMap);

        resp.getWriter().write(json);

    }

regist.jsp 页面中的代码：

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

				// 1. 获取用户名
				var username = this.value;

				$.getJSON("http://localhost:8080/JavaWeb_Code_Book/userServlet",
						"action=ajaxExistsUsername&username=" + username,
						function (data) {
							//console.log(data)
							if (data.existsUsername){
								$("span.errorMsg").text("用户名已存在！");
							} else {
								$("span.errorMsg").text("用户名可用！");
							}
						})

			})

3.2、使用 AJAX 修改把商品添加到购物车

CartServlet 程序：

/**
     * 加入购物车
     * @param req
     * @param resp
     * @throws ServletException
     * @throws IOException
     */
    protected void ajaxAddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

//        System.out.println("加入购物车");
//        System.out.println("商品编号：" + req.getParameter("id"));

        // 获取请求的参数 商品编号
        int id = WebUtils.parseInt(req.getParameter("id"),0);
        // 调用bookService.queryBookById(id):Book得到图书的信息
        Book book = bookService.queryBookById(id);
        // 把图书信息，转换成为CartItem商品项
        CartItem cartItem = new CartItem(book.getId(),book.getName(),1,book.getPrice(),book.getPrice());
        // 调用Cart.addItem(CartItem);添加商品项
        Cart cart = (Cart) req.getSession().getAttribute("cart");
        if (cart == null) {
            cart = new Cart();
            req.getSession().setAttribute("cart",cart);
        }
        cart.addItem(cartItem);

        System.out.println(cart);

        // 最后一个添加的商品名称
        req.getSession().setAttribute("lastName", cartItem.getName());

        // 6. 返回购物车总的商品数量和最后一个添加的商品名称
        Map<String, Object> resultMap = new HashMap<String,Object>();

        resultMap.put("totalCount",cart.getTotalCount());
        resultMap.put("lastName",cartItem.getName());

        Gson gson = new Gson();
        String resultMapJsonString = gson.toJson(resultMap);

        resp.getWriter().write(resultMapJsonString);

    }

pages/client/index.jsp 页面

html 代码：

			<div style="text-align: center">
				<c:if test="${empty sessionScope.cart.items}">
					<%-- 购物车为空的输出 --%>
					<span id="cartTotalCount"></span>
					<div>
						<span style="color: red" id="cartLastName">当前购物车为空</span>
					</div>
				</c:if>
				<c:if test="${not empty sessionScope.cart.items}">
					<%-- 购物车非空的输出 --%>
					<span id="cartTotalCount">您的购物车中有${sessionScope.cart.totalCount}件商品</span>
					<div>
						您刚刚将<span style="color: red" id="cartLastName">${sessionScope.lastName}</span>加入到了购物车中
					</div>
				</c:if>

			</div>

javaScript 代码：

<script type="text/javascript">
		$(function () {
			// 给加入购物车按钮绑定单击事件
			$("button.addToCart").click(function () {
				/**
				 * 在事件响应的function函数 中，有一个this对象，这个this对象，是当前正在响应事件的dom对象
				 * @type {*|jQuery}
				 */
				var bookId = $(this).attr("bookId");
				//location.href = "http://localhost:8080/JavaWeb_Code_Book/cartServlet?action=addItem&id=" + bookId;

				// 发ajax请求， 添加商品到购物车
				$.getJSON("http://localhost:8080/JavaWeb_Code_Book/cartServlet",
						"action=ajaxAddItem&id=" + bookId,
						function (data) {
							//console.log(data);
							$("#cartTotalCount").text("您的购物车中有" + data.totalCount + "件商品");
							$("#cartLastName").text(data.lastName);

						})
			})
		})
	</script>