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

第十阶段——添加Ajax

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

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

说明，在局部窗口完成请求任务，能够避免将整个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内容如下：

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

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

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