Ajax 学习

2024-11-28 技术教程

index.jsp页面

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>


<script type="text/javascript" src="${pageContext.request.contextPath }/script/jquery.js"></script>
<script type="text/javascript">
$(function(){
var isHasCart = "${sessionScope.sc == null}";
if(isHasCart == "true"){
$("#status").hide();
}else {
$("#status").show();
//这里的sc是ShoppingCart的对象他会去调用sc.属性对应的get方法
$("#bookName").text("${sessionScope.sc.bookName}");
$("#totalNumber").text("${sessionScope.sc.totalNumber}");
$("#totalMoney").text("${sessionScope.sc.totalMoney}");
}

$("a").click(function(){
//显示指定的选择器
$("#status").show();
var url = this.href;
var args = {"time":new Date()};
$.getJSON(url, args, function(data){
$("#bookName").text(data.bookName);
$("#totalNumber").text(data.totalNumber);
$("#totalMoney").text(data.totalMoney);
});
return false;
});
});

</script>

</head>
<body>

<div id="status">
您已经将 <span id="bookName"></span>  
加入到购物车，购物车中的书有 <span id="totalNumber"></span>  本，
总价格 <span id="totalMoney"></span>  元。
<br><br>
</div>
Java       <a href="${pageContext.request.contextPath}/addToCart?id=Java&price=150">加入购物车</a>
<br><br>

Oracle   <a href="${pageContext.request.contextPath }/addToCart?id=Oracle&price=200">加入购物车</a>
<br><br>

Struts2   <a href="${pageContext.request.contextPath }/addToCart?id=Struts2&price=100">加入购物车</a>
<br><br>

</body>
</html>

//SERVLET类packagecom.ajax.app.servlet;importjava.io.IOException;importjavax.servlet.ServletException;importjavax.servlet.annotation.WebServlet;importjavax.servlet.http.HttpServlet;importjavax.servlet.http.HttpServletRequest;importjavax.servlet.http.HttpServletResponse;importjavax.servlet.http.HttpSession;importcom.ajax.beans.ShoppingCart;importcom.fasterxml.jackson.databind.ObjectMapper;@WebServlet("/addToCart")//这里这样写注解后就不用再web.xml中配置servlet了publicclassAddToCartServletextendsHttpServlet{privatestaticfinallongserialVersionUID=1L;protectedvoiddoGet(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{this.doPost(request,response);}protectedvoiddoPost(HttpServletRequestrequest,HttpServletResponseresponse)throwsServletException,IOException{//1.获取请求参数：id,priceStringbookName=request.getParameter("id");intprice=Integer.parseInt(request.getParameter("price"));//2.获取购物车对象。HttpSessionsession=request.getSession();ShoppingCartsc=(ShoppingCart)session.getAttribute("sc");if(sc==null){sc=newShoppingCart();session.setAttribute("sc",sc);}//3.把点击的选项加入到购物车中sc.addToCart(bookName,price);//4.准备响应的JSON对象:{"bookName":"","totalNumber":1，"totalMoney":1}//这里的\"相当于一个'但是这里不能写'/*StringBuilderresult=newStringBuilder();result.append("{").append("\"bookName\":\""+bookName+"\"").append(",").append("\"totalNumber\":"+sc.getTotalNumber()).append(",").append("\"totalMoney\":"+sc.getTotalMoney()).append("}");response.setContentType("text/javascript");response.getWriter().print(result.toString());*/ObjectMappermapper=newObjectMapper();response.setContentType("text/javascript");System.out.println(mapper.writeValueAsString(sc));//响应ShoppingCart对象的JSON字符串response.getWriter().print(mapper.writeValueAsString(sc));}}//ShoppingCart类packagecom.ajax.beans;importjava.util.HashMap;importjava.util.Map;publicclassShoppingCart{//存放shoppingcartItem的键书名：值privateMap<String,ShoppingCartItem>items=newHashMap<>();privateStringbookName;publicvoidaddToCart(StringbookName,intprice){this.bookName=bookName;if(items.containsKey(bookName)){ShoppingCartItemitem=items.get(bookName);item.setNumber(item.getNumber()+1);item.setPrice(item.getPrice()+price);}else{ShoppingCartItemitem=newShoppingCartItem();item.setBookName(bookName);item.setPrice(price);item.setNumber(1);items.put(bookName,item);}}publicintgetTotalNumber(){inttotal=0;for(ShoppingCartItemitem:items.values()){total+=item.getNumber();}returntotal;}publicintgetTotalMoney(){intmoney=0;for(ShoppingCartItemitem:items.values()){money+=item.getPrice();}returnmoney;}publicStringgetBookName(){returnbookName;}}