本文介绍了一种利用Ajax技术实现在用户修改购物车商品数量时局部更新总价的方法，避免了整个页面的重新加载，提高了用户体验。通过分析页面结构和使用Ajax发送请求，实现了商品数量变化时总价的即时更新。
转自： https://blog.youkuaiyun.com/eson_15/article/details/51487323
昨天把项目部署了一下，玩了玩，今天完善了一下购物车中修改商品数量就能局部更新相应的总价的功能，大家都知道这得用Ajax实现，我之前也没学Ajax，刚好借助这个小功能，去简单学习一下Ajax的知识。
1. 问题的分析 |
先看一下页面中的情况：
功能如上，在没有Ajax之前，一般都是根据用户修改的值去找Action，然后返回新的jsp页面重新加载整个页面，完成数字的更新。但是有了Ajax技术后，我们可以利用Ajax技术局部刷新要改变的地方，而不是重新加载整个页面。首先看一下上图对应的jsp部分的代码：
<div class="section_container">
<!-- 购物车 --> <div id="shopping_cart"> <div class="message success">我的购物车</div> <table class="data-table cart-table" cellpadding="0" cellspacing="0"> <tr> <th class="align_center" width="10%">商品编号</th> <th class="align_left" width="35%" colspan="2">商品名称</th> <th class="align_center" width="10%">销售价格</th> <th class="align_center" width="20%">数量</th> <th class="align_center" width="15%">小计</th> <th class="align_center" width="10%">删除</th> </tr> <c:forEach items="${sessionScope.forder.sorders }" var="sorder" varStatus="num"> <tr lang="${sorder.product.id}"> <td class="align_center"><a href="#" class="edit">${num.count }</a></td> <td width="80px"><img src="${shop}/files/${sorder.product.pic}" width="80" height="80" /></td> <td class="align_left"><a class="pr_name" href="#">${sorder.name }</a></td> <td class="align_center vline">${sorder.price }</td> <td class="align_center vline"> <!-- 文本框 --> <input class="text" style="height: 20px;" value="${sorder.number }" lang="${sorder.number }"> </td> <td class="align_center vline">${sorder.price*sorder.number }</td> <td class="align_center vline"><a href="#" class="remove"></a></td> </tr> </c:forEach> </table> <!-- 结算 --> <div class="totals"> <table id="totals-table"> <tbody> <tr> <td width="60%" colspan="1" class="align_left"><strong>小计</strong></td> <td class="align_right" style=""><strong>￥<span class="price" id="total">${sessionScope.forder.total}</span> </strong></td> </tr> <tr> <td width="60%" colspan="1" class="align_left">运费</td> <