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/book/userServlet","action=ajaxExistsUsername&username=" + username,function (data) {
if (data.existsUsername) {
$("span.errorMsg").text(" 用户名已存在!");
} else {
$("span.errorMsg").text(" 用户名可用!");
}
});
});
2 、使用 AJAX 修改把商品添加到购物车
CartServlet 程序:
protected void ajaxAddItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException,IOException {
// 获取请求的参数 商品编号
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/book/cartServlet?action=addItem&id=" + bookId;
// 发 ajax 请求,添加商品到购物车
$.getJSON("http://localhost:8080/book/cartServlet","action=ajaxAddItem&id=" + bookId,function (data) {
$("#cartTotalCount").text("有 您的购物车中有 " + data.totalCount + " 件商品");
$("#cartLastName").text(data.lastName);
})
});
});
</Script>