5.Ajax_典型应用_添加商品

最新推荐文章于 2021-08-06 13:43:32 发布

XSM521

最新推荐文章于 2021-08-06 13:43:32 发布

阅读量221

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/XSM521/article/details/108071868

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

java web项目中ajax 的应用可谓无处在，本文将详细介绍添加操作的反应。

需要达到的目标，是点击加入购物车，将在第一行显示将XX加入购物车，购物车总课本数，以及总价。

1.jxnu.edu.xiaozhi.beans包下的ShoppingCart.java类

import java.util.HashMap;
import java.util.Map;

public class ShoppingCart {

   //
   private Map<String,ShoppingCartItem> items = new HashMap<String,ShoppingCartItem>();
   public void addToCart(String bookName,int price) {

       if(items.containsKey(bookName)) {
           ShoppingCartItem item = items.get(bookName);
           item.setNumber(item.getNumber() + 1);
       }else {
           ShoppingCartItem item = new ShoppingCartItem();
           item.setBookName(bookName);
           item.setNumber(1);
           item.setPrice(price);
           items.put(bookName, item);
       }
   }

   public int getTotalBookNumber() {
       int total = 0;
       for(ShoppingCartItem item : items.values()) {
           total += item.getNumber();
       }
       return total;
   }
   public int getTotalMoney() {
       int money = 0;
       for(ShoppingCartItem item : items.values()) {
           money += item.getNumber() * item.getPrice();
       }
       return money;
   }
}
2.jxnu.edu.xiaozhi.beans包下的ShoppingCartItem.java

public class ShoppingCartItem {
   private int number;

   private int price;

   private String bookName;

   public int getNumber() {
       return number;
   }

   public void setNumber(int number) {
       this.number = number;
   }

   public int getPrice() {
       return price;
   }

   public void setPrice(int price) {
       this.price = price;
   }

   public String getBookName() {
       return bookName;
   }

   public void setBookName(String bookName) {
       this.bookName = bookName;
   }

}
3.jxnu.edu.xiaozhi.servlets包下的AddToCartServlet.java

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

import jxnu.edu.xiaozhi.beans.ShoppingCart;

/**
* Servlet implementation class AddToCartServlet
*/
@WebServlet("/AddToCartServlet")
public class AddToCartServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
* @see HttpServlet#HttpServlet()
*/
public AddToCartServlet() {
super();
// TODO Auto-generated constructor stub
}

   /**
   * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
   */
   protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // TODO Auto-generated method stub
       doPost(request,response);
   }

   /**
   * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
   */
   protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
       // TODO Auto-generated method stub

       String bookName = request.getParameter("id");
       int price = Integer.parseInt(request.getParameter("price"));


       HttpSession session = request.getSession();
       ShoppingCart sc = (ShoppingCart)session.getAttribute("sc");
       if(sc == null) {
           sc = new ShoppingCart();
           session.setAttribute("sc",sc);
       }

       sc.addToCart(bookName, price);

       StringBuffer result = new StringBuffer();
       result.append("{")
               .append(" 'bookName' : ' " + bookName + "'")
               .append(",")
               .append("'totalBookNumber':" + sc.getTotalBookNumber())
               .append(",")
               .append("'totalMoney':" + sc.getTotalMoney())
               .append("}");

       response.setContentType("text/html");
       response.getWriter().print(result.toString());
   }

}

4.index.jsp

<!DOCTYPE html>

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>

<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/scripts/jquery-3.3.1.js"></script>
<script type="text/javascript">
   $(function(){
       $("a").click(function(){
           var url = this.href;
           var args = {"time": new Date()};
           //发请求
           $.getJSON(url,args,function(data){
               $("#bookName").text(data.bookName);
               $("#totalBookNumber").text(data.totalBookNumber);
               $("#totalMoney").text(data.totalMoney);
           });
           return false;
       });
   });
</script>

</head>
<body>
   您已经将 <span id="bookName"></span> 加入到购物车中.
   购物车中的书有 <span id="totalBookNumber"></span> 本.
   总价格 <span id="totalMoney"></span> 元
   <br><br>

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

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

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

5.还需要webapp的文件夹下面新建scripts文件夹，将JQuery文件（jquery-3.3.1.js）加入进去