SSH框架网上商城项目第28战之使用Ajax技术局部更新商品数量和总价

<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"><span>小计</span></td>
       <td class="align_right" style=""><span>￥<span
          class="price" id="total">${sessionScope.forder.total}</span>
       </span></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"><span>总计</span></td>
       <td class="align_right" style="">￥<span class="total" id="totalAll"><span>${sessionScope.forder.total}</span></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>

<script type="text/javascript">
 $(function(){
  //1. 注册事件
  $(".text").change(function(){
  //2. 验证数据的有效性
   var number = this.value; //也可以使用$(this).val();
   //isNaN(number)表示若number不是数字就返回真
   if(!isNaN(number) && parseInt(number)==number && number>0){ 
    //如果合法，同步更新的数
    $(this).attr("lang", number);
    //找到当前标签中第一个是tr的父节点，然后拿到属性为lang的值，也就是商品的id
    var pid = $(this).parents("tr:first").attr("lang");
    //发送Ajax请求，传输当前的数量与商品的id，返回修改数量后的总价格
    $.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");
    //计算单个商品的小计，保留两位小数
    var price = ($(this).parent().prev().html()*number).toFixed(2);
    $(this).parent().next().html(price);
   } else {
    //如果非法，还原为刚刚合法的数
    this.value = $(this).attr("lang");
   }
  })
 })
</script>

@Controller
@Scope("prototype")
public class SorderAction extends BaseAction<Sorder> {
 public String addSorder() {
 //省略无关的代码……
 //根据商品编号更新商品数量
 public String updateSorder() {
  Forder forder = (Forder) session.get("forder");
  //更新购物项，传进来的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 BaseService<Sorder> {
 //省去无关的代码……
 //根据商品id和数量更新商品数量
 public Forder updateSorder(Sorder sorder, Forder forder);
}
//SorderServiceImpl实现类
@Service("sorderService")
public class SorderServiceImpl extends BaseServiceImpl<Sorder> implements
  SorderService {
 //省略无关的代码……
 @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>