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>￥<spanclass="price" id="total">${sessionScope.forder.total}</span></strong></td></tr><tr><td width="60%" colspan="1" class="align_left">運費</td><td class="align_right" style="">￥<span class="price" id="yunfei">0.00</span></td></tr><tr><td width="60%" colspan="1" class="align_left total"><strong>總計</strong></td><td class="align_right" style="">￥<span class="total" id="totalAll"><strong>${sessionScope.forder.total}</strong></span></td></tr></tbody></table><div class="action_buttonbar"><font><a href="${shop}/user/confirm.jsp"><button type="button" title="" class="checkout fr" style="background-color: #f38256;">訂單確認</button></a></font><font><a href="#"><button type="button" title="" class=" fr"><font>清空購物車</font></button></font><a href="${shop}/index.jsp"><button type="button" title="" class="continue fr"><font>繼續購物</font></button></a><div style="clear:both"></div></div></div></div>