JQuery的Ajax請求實現局部重新整理 小案例

 

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

案例：，

 

我要實現狀態的更改，用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";

    }