首頁 > web前端 > js教程 > JQuery的Ajax請求實現局部刷新的簡單實例_jquery

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

WBOY
發布: 2016-05-16 17:00:51
原創
980 人瀏覽過

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

案例:如圖



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

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

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

複製代碼代碼如下:


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


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



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"; } 
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板