Ajax修改购物车示例

一、设计你的购物车类

让我们设计一个“ShoppingCartItem”类，它就像一本封装的书籍，包含书名、数量和价格等属性，同时也有相应的获取和设置这些属性的方法。接下来，创建一个“ShoppingCart”购物车封装类，其中使用一个Map来存储所有的购物项，并提供添加商品、获取购物车中书总数和总价格的方法。

二、JSP页面的购物车操作

在您的JSP页面中，您可能会看到一些超链接，点击这些链接就可以将书籍添加到购物车中。这些链接中包含了书籍的名称和价格信息。在页面中，我们用一个div来展示购物车的状态，包括已添加书籍的名称、数量和总价格。使用span标签来定位这些动态生成的内容。

例如：

＜body＞

＜div id="cartstatus"＞

您已经将＜span id="bookName"＞＜/span＞加入购物车，购物车现有＜span id="totalBookNumber"＞＜/span＞本书，总价为＜span id="totalMoney"＞＜/span＞。

＜/div＞

＜br＞＜br＞

＜a href="${pageContext.request.contextPath}/addToCart?id=java&price=100"＞将java书籍加入购物车＜/a＞

＜br＞

＜a href="${pageContext.request.contextPath}/addToCart?id=ajax&price=200"＞将ajax书籍加入购物车＜/a＞

＜br＞

＜a href="${pageContext.request.contextPath}/addToCart?id=jquery&price=300"＞将jquery书籍加入购物车＜/a＞

＜/body＞

其中，${pageContext.request.contextPath}用于获取项目的绝对路径。

三、Servlet中的添加到购物车操作

在Servlet中处理添加到购物车的操作，具体步骤如下：

1. 从HTTP请求中获取书籍名称和价格参数，这些参数是从JSP页面的超链接中传递过来的。

2. 从session中获取购物车对象，如果session中没有购物车对象，就新建一个并保存到session中。

3. 调用购物车的添加到购物车方法：Shopping.addToCart(bookName, price)。

4. 向客户端（可能是通过Ajax）返回一个包含购物车状态的Json对象，例如：{"bookName": "x", "totalBookNumber": 3, "totalMoney": 500}。注意，从服务器端返回Json对象时，属性名必须使用双引号。

响应json请求，展示购物车的精彩内容

我们有一个名为AddToCartServlet的Servlet，它拥有处理HTTP请求的神奇能力。当用户想要将商品添加到购物车时，这个Servlet就会挺身而出，完成使命。

doGet和doPost方法在这个Servlet中起到了关键的作用。当用户在网页上点击“添加到购物车”的超链接时，这些方法就会被触发。

这些方法会从请求中获取一些重要的参数，比如商品的id（即书名）和价格。然后，它们会从session中获取购物车对象。如果购物车不存在，就会新建一个并将其保存在session中。

接下来，点击的商品会被添加到购物车中。这个过程就像是给购物车的宝库增添了一枚璀璨的宝石。

然后，我们要准备一个响应的Json对象，其中包括书名、总书数和总金额等信息。这个过程就像是给宝石镶嵌上标签，让人们清楚地知道里面装的是什么宝贝。需要注意的是，属性名必须使用双引号，这是从服务器端返回json对象的规定。

然后，我们通过设置响应的内容类型为"text/javascript"，并通过response.getWriter().print()方法将构建的JSON字符串发送到客户端。这一步就像是打开了通往客户端的大门，将购物车的精彩内容展示给他们。

在这个过程中，我们还可以借助第三方开源工具Jackson来简化JSON字符串的拼接。使用ObjectMapper类，我们可以轻松地将购物车对象转换为JSON字符串。

而在客户端，我们可以使用ajax来接受从服务器传来的参数。这个过程就像是客户端与服务器之间的美妙舞蹈，通过HTTP GET请求载入JSON数据。我们还可以为添加购物车超链接增加单击响应函数，并在回调函数中显示购物车的内容。如果这是用户第一次使用购物车，我们可以使用jquery中的hide()和show()方法，让购物车在合适的时候出现。这样，用户就可以随时随地查看和管理他们的购物车了。

这个Servlet就像是购物车的守护者，时刻准备着为用户提供优质的服务。无论是添加商品还是查看购物车内容，它都能轻松应对，让用户的购物体验更加顺畅和愉快。在繁忙的网络世界中，我们的页面如同一个动态的舞台，每一幕都在用户与服务器之间精心编排。让我们仔细观察这个舞台上的场景转换。我们有一个神秘的购物车状态标志，它似乎在等待某种指令来显示或隐藏。这是通过一段精心编写的JavaScript代码实现的。当页面加载时，这段代码首先检查用户是否已经拥有购物车。如果用户没有购物车，那么这个标志就会显露出来，告诉用户他们可以点击创建新的购物车。相反，如果用户已经有购物车，那么这个标志就会悄然隐藏，深藏功与名。然后，它会显示购物车中的书籍名称、总数量和总金额。这一切都在静默中完成，仿佛是一场无声的交响乐。

当用户点击任何一个链接时，这段神奇的代码再次启动。它会再次显示购物车状态标志，并通过AJAX技术与服务器进行交互。服务器返回的数据会更新购物车的状态信息，包括书籍名称、总数量和总金额。所有这些操作都是在不刷新页面的情况下完成的，给用户带来流畅的体验。这就像是一场精心编排的舞蹈，每一步都精确无误，每一次点击都能引发一场美丽的变化。

这一切的背后，是一段看似复杂的jQuery代码和一段神秘的服务器端脚本共同完成的。jQuery代码负责处理用户与页面之间的交互，而服务器端脚本则负责处理与数据库的交互和数据的处理。它们共同构建了一个流畅的网络体验，让用户可以在这个舞台上自由舞动。无论是购物车的创建、书籍的添加还是金额的更新，都在瞬间完成，仿佛是一场魔法般的表演。这一切都得益于我们强大的技术和团队的精心协作。在这个舞台上，每一幕都是一场精彩的演出，每一次交互都是一次美妙的体验。