妙用Ajax技術(shù)實現(xiàn)局部刷新商品數(shù)量和總價實例代碼

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%">數(shù)量/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>
!-- 結(jié)算 -->
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>
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;">訂單確認(rèn)/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>繼續(xù)購物/font>
/button>/a>
div style="clear:both">/div>
/div>
/div>
/div>

script type="text/javascript">
$(function(){
//1. 注冊事件
$(".text").change(function(){
//2. 驗證數(shù)據(jù)的有效性
var number = this.value; //也可以使用$(this).val();
//isNaN(number)表示若number不是數(shù)字就返回真
if(!isNaN(number)  parseInt(number)==number  number>0){ 
//如果合法，同步更新的數(shù)
$(this).attr("lang", number);
//找到當(dāng)前標(biāo)簽中第一個是tr的父節(jié)點，然后拿到屬性為lang的值，也就是商品的id
var pid = $(this).parents("tr:first").attr("lang");
//發(fā)送Ajax請求，傳輸當(dāng)前的數(shù)量與商品的id，返回修改數(shù)量后的總價格
$.post("sorder_updateSorder.action", 
{number:number, 'product.id':pid},
function(total){ 
$("#total").html(total); //所有商品小計
var yunfei = $("#yunfei").html();
$("#totalAll").html((total*1 + yunfei*1).toFixed(2));//所有商品小計和運費的和
}, "text");
//計算單個商品的小計，保留兩位小數(shù)
var price = ($(this).parent().prev().html()*number).toFixed(2);
$(this).parent().next().html(price);
} else {
//如果非法，還原為剛剛合法的數(shù)
this.value = $(this).attr("lang");
}
})
})
/script>

@Controller
@Scope("prototype")
public class SorderAction extends BaseActionSorder> {
public String addSorder() {
//省略無關(guān)的代碼……
//根據(jù)商品編號更新商品數(shù)量
public String updateSorder() {
Forder forder = (Forder) session.get("forder");
//更新購物項，傳進(jìn)來的product.id被封裝到了model中
forder = sorderService.updateSorder(model, forder);
//計算新的總價格
forder.setTotal(forderService.cluTotal(forder));
session.put("forder", forder);
//以流的形式返回新的總價格
inputStream = new ByteArrayInputStream(forder.getTotal().toString().getBytes());
return "stream";
}
}

//SorderService接口
public interface SorderService extends BaseServiceSorder> {
//省去無關(guān)的代碼……
//根據(jù)商品id和數(shù)量更新商品數(shù)量
public Forder updateSorder(Sorder sorder, Forder forder);
}
//SorderServiceImpl實現(xiàn)類
@Service("sorderService")
public class SorderServiceImpl extends BaseServiceImplSorder> implements
SorderService {
//省略無關(guān)的代碼……
@Override
public Forder updateSorder(Sorder sorder, Forder forder) {
for(Sorder temp : forder.getSorders()) {
if(temp.getProduct().getId().equals(sorder.getProduct().getId())) {
temp.setNumber(sorder.getNumber());
}
}
return forder;
}
}

global-results>
!-- 省去其他公共配置 -->
result name="stream" type="stream">
param name="inputName">inputStream/param>
/result>
/global-results>