Shulou(Shulou.com)06/03 Report--

This article mainly shows you "Ajax how to modify the shopping cart", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "Ajax how to modify the shopping cart" this article.

1. The design of shopping cart

ShoppingCartItem: the encapsulation of a book, including the title, quantity, and price attributes, as well as the corresponding getter and setter methods.

ShoppingCart: shopping cart wrapper class, items is Map, and add shopping cart to get the total number of books in the shopping cart and the total price of three functions.

2:jsp adds to the shopping cart and brings in the book title and price in the hyperlink

You will be added to the shopping cart. There is a book in the shopping cart. The total price is

Java joins the shopping cart

Ajax joins the shopping cart

Jquery joins the shopping cart

Design of 3:addToCart-servlet

The steps are as follows:

1): get the request parameters id (bookName), price, which are obtained from the hyperlink in the jsp page

2): get the shopping cart object in session. If there is no shopping cart in the session property, create a new shopping cart object and place it in the session property.

3): join the shopping cart operation Shopping.addToCart (bookName, price)

4): want ajax to pass Json object, which includes: {"bookName": "totalBookNumber", "totalMoney"}. If the json object is returned from the server, the attribute name must be in double quotes!!

5): in response to the json request, response.getWriter () .print (json)

Public class AddToCartServlet extends HttpServlet {public void doGet (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doPost (request, response);} public void doPost (HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {/ / 1: get request parameters id (bookName), price String bookName = request.getParameter ("id"); int price = Integer.parseInt (request.getParameter ("price")); / / 2: get shopping cart object, ShoppingCart sc= (ShoppingCart) request.getSession (). GetAttribute ("sc") If (sc==null) {sc=new ShoppingCart (); request.getSession () .setAttribute ("sc", sc);} / / 3 Add the clicked object to the shopping cart sc.addToCart (bookName, price); / / 4: the Json object ready to respond: {"" bookName ":" totalBookNumber "," totalMoney "} / / if the json object is returned from the server, the attribute name must be in double quotes! StringBuilder sBuilder=new StringBuilder (); sBuilder.append ("{") .append ("\" bookName\ ":\" + bookName+ "\") .append (",") .append ("\" totalMoney\ ":\" + sc.getTotalMoney () + "\") .append ("}"); / respond to json request response.setContentType ("text/javascript") Response.getWriter (). Print (sBuilder.toString ());}} the above way of concatenating JSON strings with StringBuilder can be simplified with the help of third-party open source Jackson: String jsonStr=null; ObjectMapper objectMapper=new ObjectMapper (); jsonStr=objectMapper.writeValueAsString (sc)

4:ajax accepts parameters {"" bookName "": "totalBookNumber", "totalMoney"} from the server

Steps:

1): add a click response function to join the shopping cart hyperlink and cancel the default behavior (return false)

2): load JSON data through a HTTP GET request. $.getJSON (url, [data], [callback])

Prepare the url.agrs and display the contents of the shopping cart on the Jsp page inside the callback function.

3): through the hide (), show () methods in jquery to determine whether the shopping cart is used for the first time, if it is used for the first time, the jsp page does not display the shopping cart.

$(function () {var isHasCart= "${sessionScope.sc==null}"; if (isHasCart== "true") {$("# cartstatus"). Hide (); / / hide the displayed element} else {$("# cartstatus"). Show (); / / Show the hidden matching element $("# bookName"). Text ("${sessionScope.sc.bookName}"); $("# totalBookNumber"). Text ("${sessionScope.sc.totalBookNumber}") $("# totalMoney") .text ("${sessionScope.sc.totalMoney}");} $("a") .click (function () {$("# cartstatus"). Show (); var url=this.href; / / url attribute var agrs= {"time": new Date ()}; / / timestamp $.getJSON (url,agrs,function (data) {$("# bookName") .text (data.bookName); $("# totalBookNumber") .text (data.totalBookNumber) $("# totalMoney") .text (data.totalMoney);}); return false;});}). These are all the contents of the article "how to modify the shopping cart with Ajax". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.