JQuery的Ajax請求實現局部刷新的簡單實例_jquery

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

案例：如圖



我要實現狀態的更改，用JQuery的Ajax更改完之後圖標發生改變，實現頁面的局部刷新

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

1.頁面給每條記錄的圖標一個唯一的id值：

複製代碼代碼如下:

   

   

       
   

Ajax驗證：給A標籤添加的id= aUnread，再添加事件

複製代碼 代碼如下:

jQuery("#aUnread").click(function(){
       var strIds="";//定義一個傳遞資料的變數
       $("input[name='checkbox'])). (function (){
        if(this.checked){
           >    });
     $.ajax({
              type: "post",              data:"strIds= " strIds,
              url: "${ctx}/feedbackonline/updateMessageStateUnread.action",              success: f str=data.str;//接收回傳的資料
                  for(var p in str){ //遍歷接受的數組物件                    $(x).attr("src","${ctx}/將/04.png")(1🎜>;對應圖示的路徑
                  }
           {
              //請求錯誤處理
               🎜>       }) ;
    });


2.後台action:

複製程式碼 程式碼如下:

程式碼如下:



程式碼🎜>private String strIds;//省略set get 方法，自動取得到頁面傳送的回應的資料
private String[] str;//省略set get 方法
@Action("/updateMessageStateUnread")    public String updateMessageState() throws Exception{
       String[] jStr = strIds.split(",");//將字串分割成字串陣列賦給有get set方法的陣列變數str回頁
       for(int i=0;i         );
           messageUserinfo=messageUserinfoManager.queryById(id);
         Manager.update(messageUserinfo);        
       }  

       return "ajax"; }       return "ajax"; }