尚硅谷JavaWeb笔记——书城项目（第十阶段：使用ajax）

梦里梦外; 2022-11-01 10:57 229阅读 0赞

### 文章目录 ###

*  第十阶段——添加Ajax
 *   *  使用AJAX验证用户名是否可用
     *  使用AJAX实现加入购物车

# 第十阶段——添加Ajax #

## 使用AJAX验证用户名是否可用 ##

在注册页面判断用户名是否可用的逻辑如下图所示

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-3RFIuqOo-1614148160264)(/Users/gaojunsong/Library/Application Support/typora-user-images/Java学习/JAVAWeb/image-20210223165114902.png)\]][img-3RFIuqOo-1614148160264_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210223165114902.png]

说明，在局部窗口完成请求任务，能够避免将整个jsp页面传过去而避免传输资源的浪费。验证用户名是否可用，就是AJAX最直接的应用。其在对应页面直接将某一小部分数据发送给服务器，调用服务器中对应的方法完成对请求对响应。

`UserServlet`程序使用ajax与否最大的区别在于：使用ajax时需要将请求得到的数据封装进入Map中，然后转换成json回传个前端页面

public void ajaxExistUsername(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { 
      // 获取请求的参数username
      String username = request.getParameter("username");
      String password = request.getParameter("password");
      // 调用userService.existsUsername();
      boolean existUsername = userService.existUsername(username);
      // 把返回的结果封装成为map对象
      HashMap<String, Object> resultMap = new HashMap<>();
      resultMap.put("existUsername", existUsername);
    
      // JSONObject jsonObject = JSONObject.fromObject(resultMap);
    
      Gson gson = new Gson();
    
      String json = gson.toJson(resultMap);
    
      response.getWriter().write(json);
    }

这是因为`$.getJSON`方法严格要求回传数据为json格式，否则将无法执行回传成功方法。

在前端页面中，也只需要给输入窗口加上`blur`事件，判断回传数据是否为真即可

// 失去焦点以后·····
    $("#username").blur(function () { 
      //1 获取用户名
      var username = this.value;
    
      $.get("http://localhost:8080/07_book/userServlet", "action=ajaxExistUsername&username=" + username, function (data) { 
        if (data.existUsername) { 
          $("span.errorMsg").text("用户名已存在！");
        } else { 
          $("span.errorMsg").text("用户名可用！");
        }
      },"json");
    
    });

## 使用AJAX实现加入购物车 ##

和验证一样，由于加入购物车只是针对当前页面的某一个小部分操作，如果将整个页面刷新以获取回传数据及其浪费，因此使用局部刷新对方法，能够最大限度降低资源损耗。使用ajax加入购物车，区别也仅仅在于需要将请求得到的数据装入Map中回传即可。

注意：由于该出前端页面中只有：**1）当前购物车中商品数目**，**2）最后一次添加进入购物车的商品名称**，因此回传也仅仅需要将这两个数据回传即可，其他内容同不使用ajax请求相同

protected void ajaxAddItem(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {         // 获取请求的参数 商品编号
      String ids = request.getParameter("id");
      int id = WebUtils.parseInt(ids, 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) request.getSession().getAttribute("cart");
      if (cart == null) { 
        cart = new Cart();
        request.getSession().setAttribute("cart", cart);
      }
      cart.addItem(cartItem);
      System.out.println(cart);
      // 最后一个添加的商品名称
      request.getSession().setAttribute("lastName", cartItem.getName());
    
      //6、返回购物车总的商品数量和最后一个添加的商品名称
      Map<String, Object> resultMap = new HashMap<>();
      resultMap.put("totalCount", cart.getTotalCount());
      resultMap.put("lastName", cartItem.getName());
    
      Gson gson = new Gson();
    
      String resultMapJsonString = gson.toJson(resultMap);
      response.getWriter().write(resultMapJsonString);
    }

前端对应的jQuery内容如下：

至此，该项目告一段落！！！！

[img-3RFIuqOo-1614148160264_Users_gaojunsong_Library_Application Support_typora-user-images_Java_JAVAWeb_image-20210223165114902.png]: /images/20221024/52805ff74ff74e178b4884896c09bd42.png