jQuery+AJAX+Struts實現無重新整理分頁

jQuery+AJAX+Struts實現無重新整理分頁

jQuery+AJAX+Struts實現無重新整理分頁

說明：

1．需要jQuery外掛程式js檔案；

2．使用myeclipse添加struts能力；

從前從用戶端頁面向伺服器發送Ajax請求，需要在js中先建立XMLHttpRequest對象，對象建立好以後使用OPEN（'GET/POST',URL，同步/非同步）設定提交方式，URL地址，使用同步還是非同步方式。然後使用send(data)向伺服器發送資料，同時使用onreadystatechange來綁定回呼函數。如果是使用GET方式提交資料，那麼就直接在URL地址中拼接資料，如果是使用POST方式要先佈建要求頭setRequestHeader(Content-Type,application/x-www-form-urlencodeed),然後再使用send（）方法發送資料。在回呼函數裡面還要對readyState進行判斷看目前狀態是否已經完成（readyState=4），以及伺服器是否成功返回（status=200）,然後再做相應的處理。整過過程顯得很麻煩，而且建立的XMLHttpRequest還會根據瀏覽器的不同而不同，顯得很麻煩。

使用了jQuery為我們提供的ajax(option)就非常方便了，只需要這樣做就可以了：

 

$.ajax({   type: POST,   url: RegService.do,   data: name=John&location=Boston,   dataType:'json',   success: function(msg){     alert( Data Saved:  + msg );   }});

 

type是指定提交資料的方式是post還是get，url是資料提交給伺服器的URL地址，data是提交給伺服器的資料，如果是get方式還可以在URL地址中拼接，dataType表示伺服器返回的資料按什麼組織，success表示資料成功返回時的回呼函數。還可以使用jQuery.get(url,[data],[callback])這是一個簡單的 GET 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。jQuery.getJSON(url,[data],[callback])通過 HTTP GET 請求載入 JSON 資料。jQuery.post(url,[data],[callback])這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回呼函數。jQuery.getScript(url,[callback])通過 HTTP GET 請求載入並執行一個 JavaScript 檔案。如：$.getScript(test.js,function(){

alert(Script loaded and executed.)；

 

 

jQuery的ajax分頁流程：

 

 

步驟：

 

1、 myeclipse下建立一個web項目；

 

2、 給項目添加struts能力；

 

 

3、 配置web.xml和struts.xml設定檔；

 

struts.xml配置

 

web.xml配置：struts部分可以自動產生

 

4、 建立兩個jsp頁面，一個為index.jsp，一個為userlist.jsp；

 

 

5、 編寫index頁面，在body做初始化操作，並添加一個a標籤跳轉到userlist.jsp；

 

indexOnload()函數在index.js裡

onlineAjax()方法在ajax.js裡

 

sendJqueryAjax()方法在jqueryAjax.js裡面

 

BaseAction.java核心內容

 

 

6、 編寫userlist.jsp頁面，添加資料顯示的table和其他內容；

7、編寫js代碼，用jQuery的ajax功能實現分頁顯示；

 

8、 建立一個action作為ajax請求的URL地址；

 

 

9、 在userlist.jsp頁面編寫回呼函數，顯示資料到當前頁面；

 

userlist.jsp中的javascript代碼

 

10、添加上一頁，下一頁，實現分頁能力；

userlist.jsp添加的分頁內容

測試：運行項目