使用Ajax的添加购物车

来源：互联网发布：java安装错误1603 编辑：程序博客网时间：2024/05/29 08:01

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<html>
<head>
<title>My JSP 'shop_cart.jsp' starting page</title>
<script type="text/javascript" src="Jquery/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var isHasCart = "${sessionScope.sc == null}";
if(isHasCart == "true"){
$("#mes").hide();
}else{
$("#mes").show();
$("#bookname").text("${sessionScope.sc.bookname}");
$("#totalNumber").text("${sessionScope.sc.totalNumber}");
$("#totalMoney").text("${sessionScope.sc.totalMoney}");
}

$("a:first").click(function(){
$("#mes").show();
var num1 = $("input[name='num']:first").val();
var num = num1;
var url = this.href+num;
var args = {"time":new Date()};
$.getJSON(url,args,function(data){
$("#bookname").text(data.bookname);
$("#totalNumber").text(data.totalNumber);
$("#totalMoney").text(data.totalMoney);
});
var num1 = $("input[name='num']:first").val("");
return false;
});
$("a:eq(1)").click(function(){
$("#mes").show();
var num2 = $("input[name='num']:eq(1)").val()
var num = num2;
var url = this.href+num;
var args = {"time":new Date()};
$.getJSON(url,args,function(data){
$("#bookname").text(data.bookname);
$("#totalNumber").text(data.totalNumber);
$("#totalMoney").text(data.totalMoney);
});
var num2 = $("input[name='num']:eq(1)").val("");
return false;
});
$("a:last").click(function(){
$("#mes").show();
var num3 = $("input[name='num']:last").val()
var num = num3;
var url = this.href+num;
var args = {"time":new Date()};
$.getJSON(url,args,function(data){
$("#bookname").text(data.bookname);
$("#totalNumber").text(data.totalNumber);
$("#totalMoney").text(data.totalMoney);
})
var num3 = $("input[name='num']:last").val("");
return false;
})
})
</script>
</head>

<body>
<div id="mes">
您已将 <span id="bookname"></span> 
加入购物车，购物车中共有 <span id="totalNumber"></span> 件商品，
总计 <span id="totalMoney"></span> 元。
</div>
<form action="" method="post">
<table cellpadding="0" cellspacing="0" border="1" >
<tr>
<th>书名</th>
<th>数量</th>
<th>价格</th>
<th>操作</th>
</tr>
<tr>
<td>Java</td>
<td>
<input type="number" name="num" min="1" max="100" />
</td>
<td>100元</td>
<td><a href="addCart?name=Java&price=100&num=">加入购物车</a></td>
</tr>
<tr>
<td>JavaWeb</td>
<td>
<input type="number" name="num" min="1" max="100" />
</td>
<td>200元</td>
<td><a href="addCart?name=JavaWeb&price=200&num=">加入购物车</a></td>
</tr>
<tr>
<td>JavaScript</td>
<td>
<input type="number" name="num" min="1" max="100" />
</td>
<td>50元</td>
<td><a href="addCart?name=JavaScript&price=50&num=">加入购物车</a></td>
</tr>
</table>
</form>
</body>

</html>

2.javaBean：

public class Shop_CartItem {
private String bookname;
private int num;
private int price;
public String getBookname() {
return bookname;
}
public void setBookname(String bookname) {
this.bookname = bookname;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
public int getPrice() {
return price;
}
public void setPrice(int price) {
this.price = price;
}
}

public class Shop_Cart {
Map<String, Shop_CartItem> items = new HashMap<String, Shop_CartItem>();
private String bookname;
public void addCart(String bookname,int num,int price){
this.bookname=bookname;
if(items.containsKey(bookname)){
Shop_CartItem item = items.get(bookname);
item.setNum(item.getNum()+num);
}else{
Shop_CartItem item = new Shop_CartItem();
item.setBookname(bookname);
item.setNum(num);
item.setPrice(price);
items.put(bookname, item);
}
}
public String getBookname() {
return bookname;
}
public int getTotalNumber(){
int number = 0;
for(Shop_CartItem item:items.values()){
number += item.getNum();
}
return number;
}
public int getTotalMoney(){
int money = 0;
for(Shop_CartItem item:items.values()){
money += item.getNum()*item.getPrice();
}
return money;
}
}

4.Servlet：

public class AddCartServlet extends HttpServlet{

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}

@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setCharacterEncoding("utf-8");
String bookname = req.getParameter("name");
int num = Integer.parseInt(req.getParameter("num"));
int price = Integer.parseInt(req.getParameter("price"));
HttpSession session = req.getSession();
Shop_Cart sc = (Shop_Cart) session.getAttribute("sc");
if(sc == null){
sc = new Shop_Cart();
session.setAttribute("sc", sc);
}
sc.addCart(bookname, num, price);
StringBuilder result = new StringBuilder();
result.append("{")
.append("\"bookname\":\""+bookname+"\"")
.append(",")
.append("\"totalNumber\":"+sc.getTotalNumber())
.append(",")
.append("\"totalMoney\":"+sc.getTotalMoney())
.append("}");
resp.setContentType("text/html; charset=utf-8");
resp.getWriter().print(result.toString());
}
}

5.配置web.xml文件：

<servlet>
<servlet-name>ChecknameServlet</servlet-name>
<servlet-class>com.dzl.servlet.ChecknameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ChecknameServlet</servlet-name>
<url-pattern>/checkname</url-pattern>
</servlet-mapping>

6.运行结果：

未加入购物车之前：

选择数量加入之后显示效果：

0 0