JQuery的Ajax請求實現局部重新整理的簡單一實例_jquery

來源:互聯網
上載者:User

請求的ajax路徑傳遞的參數(data)會到action中被一個同樣名字的變數(附帶set get方法)接收,返回的data是一個JQuery的數組對象,在被調用的action中涉及到的資料變數會對象,都會封裝到data中最終返回給頁面。

案例:如圖

 alt=

我要實現狀態的更改,用JQuery的Ajax更改完之後表徵圖發生改變,實現頁面的局部重新整理

原理:局部重新整理是重新整理頁面的一部分,在此案例中實現的只是表徵圖的改變,把後台代碼和前台現實的表徵圖分離,並不是對資料庫重新做查詢,二是後台數顯資料修改之後,前台直接改變表徵圖。

1.頁面 給每條記錄的表徵圖一個唯一的id值:

複製代碼 代碼如下:

<td align="center">
    <s:if test="messageState == 0">
<img src="${ctx}/images/04.png" id="r${message.messageID}"/>
    </s:if>
<s:else>
        <img src="${ctx}/images/03.png" id="r${message.messageID}"/>
    </s:else>
</td>

Ajax驗證:給A標籤添加的id= aUnread,再添加事件
複製代碼 代碼如下:

jQuery("#aUnread").click(function(){
       var strIds="";//定義一個傳遞資料的變數
       $("input[name='checkbox']").each(function (){
        if(this.checked){
            strIds +=this.value+",";//得到的是多個id值,拼成字串傳到action
       }
    });
     $.ajax({
              type: "post",
              dataType:'json', //接受資料格式
              cache:false,
              data:"strIds="+strIds,
              url: "${ctx}/feedbackonline/updateMessageStateUnread.action",
              beforeSend: function(XMLHttpRequest){
              },
              success: function(data){
                  var str=data.str;//接收返回的資料
                  for(var p in str){ //遍曆接受的數組對象
                    var x="#r"+str[p];//擷取要改變的記錄的表徵圖id
                    $(x).attr("src","${ctx}/images/04.png");
//把對應的id值的表徵圖src屬性值變成相應表徵圖的路徑
                  }
               },
              error: function(){
              //請求出錯處理
                  alert("Error!");
              }
       });
    });

2.後台action:
複製代碼 代碼如下:

private String strIds;//省略set get 方法,自動擷取到頁面傳的響應的資料
private String[] str;//省略set get 方法
@Action("/updateMessageStateUnread")
    public String updateMessageState() throws Exception{
       String[] jStr = strIds.split(",");//把字串拆分成字串數組
       str=jStr;//把拆分的字串數組賦給有get set方法的陣列變數str返回到頁面上
       for(int i=0;i<jStr.length;i++){
           int id=Integer.parseInt(jStr[i]);
           messageUserinfo=messageUserinfoManager.queryById(id);
           messageUserinfo.setMessageState(0);
           messageUserinfoManager.update(messageUserinfo);        
       }  
       return "ajax";
    }

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.