欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

SSH框架網(wǎng)上商城項(xiàng)目第28戰(zhàn)之使用Ajax技術(shù)局部更新商品數(shù)量和總價(jià)

 更新時(shí)間:2016年06月06日 16:35:34   作者:eson_15  
這篇文章主要為大家詳細(xì)介紹了SSH框架網(wǎng)上商城項(xiàng)目第28戰(zhàn)之使用Ajax技術(shù)局部更新商品數(shù)量和總價(jià),感興趣的小伙伴們可以參考一下

之前,把項(xiàng)目部署了一下,玩了玩,今天完善了一下購物車中修改商品數(shù)量就能局部更新相應(yīng)的總價(jià)的功能,大家都知道這得用Ajax實(shí)現(xiàn),我之前也沒學(xué)Ajax,剛好借助這個(gè)小功能,去簡單學(xué)習(xí)一下Ajax的知識。  

1. 問題的分析

先看一下頁面中的情況:


功能如上,在沒有Ajax之前,一般都是根據(jù)用戶修改的值去找Action,然后返回新的jsp頁面重新加載整個(gè)頁面,完成數(shù)字的更新。但是有了Ajax技術(shù)后,我們可以利用Ajax技術(shù)局部刷新要改變的地方,而不是重新加載整個(gè)頁面。首先看一下上圖對應(yīng)的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%">銷售價(jià)格</th>
     <th class="align_center" width="20%">數(shù)量</th>
     <th class="align_center" width="15%">小計(jì)</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>小計(jì)</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">運(yùn)費(fèi)</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>總計(jì)</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>

  看著貌似很多的樣子,其實(shí)功能很簡單,就是從域中拿出相應(yīng)的數(shù)據(jù)顯示出來而已,我們現(xiàn)在要實(shí)現(xiàn)上面描述的功能的話,先來分析一下思路:

首先得注冊一個(gè)事件:即修改了數(shù)量那里的文本框觸發(fā)的事件;
在該事件中,我們拿到用戶輸入的數(shù),判斷輸入的合法性,因?yàn)橐乐褂脩魜y輸入;
如果合法,通過Ajax請求將數(shù)據(jù)發(fā)送到后臺;
后臺針對新的數(shù)量,調(diào)用相應(yīng)的業(yè)務(wù)邏輯方法得到新的結(jié)果,并將其通過流返回到前臺;
Ajax收到結(jié)果后,再對相應(yīng)位置的數(shù)據(jù)進(jìn)行更新。整個(gè)流程就走完了。
如果非法,則顯示修改前的數(shù)字。不做任何處理

2. Ajax請求的實(shí)現(xiàn)

分析完了流程,接下來我們就著手去實(shí)現(xiàn)了,首先把js部分的代碼貼在這,然后我們根據(jù)上面的流程詳細(xì)分析:

<script type="text/javascript">
 $(function(){
  //1. 注冊事件
  $(".text").change(function(){
  //2. 驗(yàn)證數(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)簽中第一個(gè)是tr的父節(jié)點(diǎn),然后拿到屬性為lang的值,也就是商品的id
    var pid = $(this).parents("tr:first").attr("lang");
    //發(fā)送Ajax請求,傳輸當(dāng)前的數(shù)量與商品的id,返回修改數(shù)量后的總價(jià)格
    $.post("sorder_updateSorder.action", 
     {number:number, 'product.id':pid},
     function(total){  
      $("#total").html(total); //所有商品小計(jì)
      var yunfei = $("#yunfei").html();
      $("#totalAll").html((total*1 + yunfei*1).toFixed(2));//所有商品小計(jì)和運(yùn)費(fèi)的和
    }, "text");
    //計(jì)算單個(gè)商品的小計(jì),保留兩位小數(shù)
    var price = ($(this).parent().prev().html()*number).toFixed(2);
    $(this).parent().next().html(price);
   } else {
    //如果非法,還原為剛剛合法的數(shù)
    this.value = $(this).attr("lang");
   }
  })
 })
</script>

2.1 注冊事件

  我們看上面的代碼可知,注冊事件首先要定位到這個(gè)文本框,這里是通過類選擇器來定位的,因?yàn)槭俏谋究?,所以用change()來注冊該事件,然后在里面定義一個(gè)function()函數(shù)來處理該事件。

2.2 判斷數(shù)據(jù)合法性

  好了,注冊好了事件后,我們首先要對用戶輸入的數(shù)進(jìn)行合法性判斷,因?yàn)橛脩艨赡茌斎肓?或者負(fù)數(shù),可能輸入了小數(shù),甚至輸入了字母或其他字符等等。所以要進(jìn)行驗(yàn)證。isNaN(number)表示若number不是數(shù)字就返回真,我們可以用這個(gè)函數(shù)來判斷是否為數(shù)字;parseInt(number)表示對數(shù)組進(jìn)行取整,然后跟它自身進(jìn)行比較,我們巧妙的運(yùn)用了這個(gè)來判斷number是否為整數(shù)。

2.3 發(fā)送Ajax請求

  如果數(shù)據(jù)是合法的,我們獲取該數(shù)據(jù)后,就可以向后臺發(fā)送Ajax請求了,我們需要考慮一個(gè)問題:需要傳哪些參數(shù)呢?首先用戶想要更新數(shù)量,毫無疑問,用戶輸入的數(shù)字肯定要傳過去,其次到底傳哪個(gè)商品呢?也就是說我們需要獲取用戶想要修改的商品的id號,知道了要傳的參數(shù)后,我們想辦法獲取id號即可。
  這里有一個(gè)問題,用戶的購物車?yán)锟赡懿恢挂患唐?,很自然的?huì)想到,如果能用一條語句可以拿到不同商品的id,就非常好了,因此,想到了可以使用該文本框的父標(biāo)簽,因?yàn)椴煌纳唐匪母笜?biāo)簽都一樣,都是第一個(gè)<tr>標(biāo)簽,所以我們把商品的id放在那個(gè)<tr>標(biāo)簽中的lang屬性里,為什么要放在lang屬性里呢?因?yàn)閘ang屬性基本不會(huì)用到,它是用來定義語言的,而且用lang屬性還不容易和其他屬性沖突~這樣我們就可以通過$(this).parents("tr:first").attr("lang");來獲取商品的id了。
  接下來開始發(fā)送Ajax請求,使用post方式發(fā)送,post方法中有四個(gè)參數(shù):

第一個(gè)參數(shù)是要發(fā)送到的Action
第二個(gè)參數(shù)是要傳過去的參數(shù),使用的是json格式
第三個(gè)參數(shù)是一個(gè)function(result),result是用來接收后臺穿過來的數(shù)據(jù)
第四個(gè)方式是規(guī)定接收什么類型的數(shù)據(jù),json表示接收json數(shù)據(jù),text表示接收流

  從后臺返回的total是所有商品的總價(jià)格,所以在function中,首先我們根據(jù)id拿到所有商品小計(jì)的元素然后賦值為total即可,totalAll是加了運(yùn)費(fèi)的總價(jià),后面那個(gè)toFixes(2)表示保留兩位小數(shù)。然后再拿到單個(gè)商品小計(jì)的元素,計(jì)算一下單個(gè)商品的小計(jì),這樣前臺頁面在沒有重新載入的情況下,更新了我們想要更新的部分,這就是Ajax強(qiáng)大的地方,這個(gè)和前面EasyUI一樣的,EasyUI也是Ajax請求。
   好了,關(guān)于Ajax部分到這里就介紹完了,下面是后臺的處理剛剛的請求,是針對自己這個(gè)項(xiàng)目的,用來記錄項(xiàng)目進(jìn)度用的。

3. 后臺的更新

  剛剛Ajax請求的action是SortedAction中的updateSorder()方法,所以我們?nèi)orderAction中完成updateSorder()方法:

@Controller
@Scope("prototype")
public class SorderAction extends BaseAction<Sorder> {
 public String addSorder() {

 //省略無關(guān)的代碼……

 //根據(jù)商品編號更新商品數(shù)量
 public String updateSorder() {
  Forder forder = (Forder) session.get("forder");
  //更新購物項(xiàng),傳進(jìn)來的product.id被封裝到了model中
  forder = sorderService.updateSorder(model, forder);
  //計(jì)算新的總價(jià)格
  forder.setTotal(forderService.cluTotal(forder));
  session.put("forder", forder);
  //以流的形式返回新的總價(jià)格
  inputStream = new ByteArrayInputStream(forder.getTotal().toString().getBytes());
  return "stream";
 }
}

相應(yīng)的Service中的方法完善如下:

//SorderService接口
public interface SorderService extends BaseService<Sorder> {
 //省去無關(guān)的代碼……
 //根據(jù)商品id和數(shù)量更新商品數(shù)量
 public Forder updateSorder(Sorder sorder, Forder forder);
}

//SorderServiceImpl實(shí)現(xiàn)類
@Service("sorderService")
public class SorderServiceImpl extends BaseServiceImpl<Sorder> 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;
 }
}

最后struts.xml文件中的配置,是把”stream”配在了<global-result>里面,如下

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

好了,現(xiàn)在Action中計(jì)算出的總價(jià)格就可以通過流的形式傳到前臺了,Ajax就可以在它的function中接收到,放到total中了,跟前面的就接上了。

原文鏈接: http://blog.csdn.net/eson_15/article/details/51487323

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 詳解Java的Struts框架中注釋的用法

    詳解Java的Struts框架中注釋的用法

    這篇文章主要介紹了詳解Java的Struts框架中注釋的用法,Struts是Java的SSH三大web開發(fā)框架之一,需要的朋友可以參考下
    2015-12-12
  • 常用的Spring Boot調(diào)用外部接口方式實(shí)現(xiàn)數(shù)據(jù)交互

    常用的Spring Boot調(diào)用外部接口方式實(shí)現(xiàn)數(shù)據(jù)交互

    Spring Boot提供了多種調(diào)用外部接口的方式,可以方便地實(shí)現(xiàn)與其他系統(tǒng)的數(shù)據(jù)交互,提高系統(tǒng)的可擴(kuò)展性和數(shù)據(jù)共享能力,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-04-04
  • Java打包工具jar包詳解

    Java打包工具jar包詳解

    這篇文章主要介紹了Java打包工具jar包詳解,在本例中我們引入一個(gè)叫jaxen.jar的庫,并將所有以”org.jaxen”開頭的類重命名以”org.example.jaxen”開頭,具體實(shí)例代碼跟隨小編一起看看吧
    2021-10-10
  • 簡單了解JAVA變量類型及代碼實(shí)例

    簡單了解JAVA變量類型及代碼實(shí)例

    這篇文章主要介紹了簡單了解JAVA變量類型及代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-02-02
  • 解決在Idea 2020.2下使用 Lombok的注解不生效的問題(插件安裝了,依賴也寫了,自動(dòng)注解也設(shè)置了)

    解決在Idea 2020.2下使用 Lombok的注解不生效的問題(插件安裝了,依賴也寫了,自動(dòng)注解也設(shè)置了)

    這篇文章主要介紹了在Idea 2020.2下使用 Lombok的注解不生效的問題(插件安裝了,依賴也寫了,自動(dòng)注解也設(shè)置了),本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2020-08-08
  • 解析Java中未被捕獲的異常以及try語句的嵌套使用

    解析Java中未被捕獲的異常以及try語句的嵌套使用

    這篇文章主要介紹了Java中未被捕獲的異常以及try語句的嵌套使用,是Java入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-09-09
  • 詳解HDFS多文件Join操作的實(shí)例

    詳解HDFS多文件Join操作的實(shí)例

    這篇文章主要介紹了詳解HDFS多文件Join操作的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家,讓大家理解掌握這部分內(nèi)容,需要的朋友可以參考下
    2017-10-10
  • 關(guān)于IDEA2020.1新建項(xiàng)目maven PKIX 報(bào)錯(cuò)問題解決方法

    關(guān)于IDEA2020.1新建項(xiàng)目maven PKIX 報(bào)錯(cuò)問題解決方法

    這篇文章主要介紹了關(guān)于IDEA2020.1新建項(xiàng)目maven PKIX 報(bào)錯(cuò)問題解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-06-06
  • SpringBoot輕松實(shí)現(xiàn)ip解析(含源碼)

    SpringBoot輕松實(shí)現(xiàn)ip解析(含源碼)

    IP地址一般以數(shù)字形式表示,如192.168.0.1,IP解析是將這個(gè)數(shù)字IP轉(zhuǎn)換為包含地區(qū)、城市、運(yùn)營商等信息的字符串形式,如“廣東省深圳市 電信”,這樣更方便人理解和使用,本文給大家介紹了SpringBoot如何輕松實(shí)現(xiàn)ip解析,需要的朋友可以參考下
    2023-10-10
  • Spring Boot 自動(dòng)配置的實(shí)現(xiàn)

    Spring Boot 自動(dòng)配置的實(shí)現(xiàn)

    這篇文章主要介紹了Spring Boot 自動(dòng)配置的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-08-08

最新評論