jquery+ajax+struts2，jquerystruts2
AJAX 是與伺服器交換資料的藝術，它在不重載全部頁面的情況下，實現了對部分網頁的更新。
編寫常規的 AJAX 代碼並不容易，因為不同的瀏覽器對 AJAX 的實現並不相同。
這意味著您必須編寫額外的代碼對瀏覽器進行測試。不過，jQuery 團隊為我們解決了這個難題，我們只需要一行簡單的代碼，就可以實現 AJAX 功能。
現在來看一下3個常用的ajax方法
$(selector).load(URL,data,callback);
必需的 URL 參數規定您希望載入的 URL。
可選的 data 參數規定與請求一同發送的查詢字串鍵/值對集合。是一個json格式的資料。
可選的 callback 參數是 load() 方法完成後所執行的函數名稱。
看一個擷取服務端時間的例子
jsp：
<script type="text/javascript" src="${basePath }/js/jquery-1.8.3.min.js"></script> <script type="text/javascript"> $(function(){ $(":button").click(function(){ var url = "${basePath}/timeServlet"; //最簡單的ajax, 預設以get方式提交, 傳回值自動填滿到標籤中 $("#time").load(url); }); }); </script> </head> <body> 目前時間：<span id="time"></span><br> <input type="button" value="擷取時間"> </body>
頁面是這樣的：
其中basePath是這樣的：
<%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><%pageContext.setAttribute("basePath", path);%>
servlet：
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { SimpleDateFormat sdf = new SimpleDateFormat("hh:mm:ss"); String formatTime = sdf.format(new Date()); PrintWriter pw = response.getWriter(); pw.println(formatTime); pw.flush(); pw.close(); }
這樣就完成了一個最簡單的ajax，如果有第2個參數data，提交方式就是post，否則就是get。
看一下效果，點擊擷取時間就可以擷取到服務端的時間：
後2個參數怎麼使用，別急，下面在$.post中講解
定義和用法
post() 方法通過 HTTP POST 請求從伺服器載入資料。
文法
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
| 參數 | 描述 |
| url | 必需。規定把請求發送到哪個 URL。 |
| data |
可選。映射或字串值。規定連同請求發送到伺服器的資料。 |
| success(data, textStatus, jqXHR) | 可選。請求成功時執行的回呼函數。 |
| dataType | 可選。規定預期的伺服器響應的資料類型。預設執行智能判斷（xml、json、script 或 html）。 |
看一個判斷登入的例子來瞭解它的用法，這個例子通過驗證登入然後返回一個圖片的路徑，如果輸入正確，如果輸入正確，則圖片顯示一個對號，否則顯示一個叉：
jsp：
<script type="text/javascript"> $(function(){ $(":button").click(function(){ var url = "${basePath}/userServlet"; //先用servlet來做 //var url = "${basePath}/user_login.action"; //然後用struts2來做 var username = $(":text").val(); var password = $(":password").val(); var data_servlet = {"username" : username, "password" : password}; var data_struts2 = {"user.username" : username, "user.password" : password}; //先測試servlet, 測試struts2的時候將第2個data參數改為data_struts2即可 $.post(url, data_servlet, function(data, statusTxt, jqXHR){ alert("data-=-"+data); alert("data.src-=-="+data.src); alert("statusTxt-=-"+statusTxt); alert("jqXHR.status-=-"+jqXHR.status); //狀態代碼, 如200 alert("jqXHR.readyState-=-"+jqXHR.readyState);//請求執行的狀態, 如4 alert("jqXHR.statusText-=-"+jqXHR.statusText); //狀態字串, 如ok alert("jqXHR.responseText-=-"+jqXHR.responseText);//返回的字串值 alert("jqXHR.responseXML-=-"+jqXHR.responseXML);//返回的XML資料 $("img").attr("src", '${basePath}'+data);//返回的字串 //$("img").attr("src", '${basePath}'+data.src); //返回的是json資料 }); }); }); </script> </head> <body> <form> 使用者名稱<input type="text"><br> 密碼<input type="password"><br> <input type="button" value="點我驗證"> <img> </form> </body>
頁面是這樣的：
先看用servlet做的：
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { request.setCharacterEncoding("utf-8"); String username = request.getParameter("username"); String password = request.getParameter("password"); //從資料庫查詢 User user = userDao.findByUsernameAndPassword(username, password); System.out.println(user); PrintWriter pw = response.getWriter(); if(user != null) pw.println("/images/icon/Button_Ok_64px_1070400_easyicon.net.ico"); else pw.println("/images/icon/Button_Delete_64px_1070396_easyicon.net.ico"); pw.flush(); pw.close(); }
看一下效果：
如果輸入正確，顯示如下：
如果輸入錯誤，顯示如下：
通過jqXHR.responseText可以看到返回的是一個字串，字串不需要解析。接下來看一下struts2的ajax
先做web.xml中配置struts2的過濾器：
<filter> <filter-name>struts2</filter-name> <filter-class>org.apache.struts2.dispatcher.ng.filter.StrutsPrepareAndExecuteFilter</filter-class> </filter> <filter-mapping> <filter-name>struts2</filter-name> <url-pattern>*.action</url-pattern> </filter-mapping>
struts2設定檔struts.xml，放到src下：
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache.org/dtds/struts-2.3.dtd"><struts> <constant name="struts.action.extension" value="action" /> <!-- 設定struts訪問尾碼為action --> <constant name="struts.enable.DynamicMethodInvocation" value="false" /> <!-- 禁止動態方法訪問 --> <package name="user-action" namespace="/" extends="json-default"> <!-- json-default是繼承自struts-default的 --> <action name="user_login" class="top.bwcx.ajax.user.UserAction"> <result type="json" /><!-- 無需跳轉頁面 --> </action> </package></struts>
struts2的ajax需要struts2-json-plugin.jar外掛程式包的支援
這裡是通過c3p0串連資料庫, dbutils操作資料庫的，有關這方面的內容，請參看我以前的隨筆c3p0串連資料庫的3種方式和dbutils基本使用
action中的配置:
public class UserAction extends ActionSupport { //這裡為了簡單, 就直接寫了一個dao, service什麼的沒有寫 private UserDao userDao = new UserDao(); //User實體類，用來接收頁面傳過來的值,需要get和set方法, 很重要 private User user; //用get方法傳回值, 然後在頁面取的, 這個需要get方法 private String src; @Override public String execute() throws Exception { System.out.println(user.getUsername()); System.out.println(user.getPassword()); user = userDao.findByUsernameAndPassword(user.getUsername(), user.getPassword()); System.out.println(user); if(user == null){ src = "/images/icon/Button_Delete_64px_1070396_easyicon.net.ico"; }else src = "/images/icon/Button_Ok_64px_1070400_easyicon.net.ico"; return SUCCESS; }
public void setUser(User user) { this.user = user; } public User getUser() { return user; } public String getSrc() { return src; }}
ajax請求struts，是在action頁面通過get方法傳遞響應的，此處就是src屬性加上其get方法就能把圖片路徑返回了，返回格式是json串
在頁面接收時，注意把傳遞的參數改為data_struts2，url也改一下，直接像這樣解析json就行了：data.src
效果與剛才servlet的效果是一樣的，也可以看一下列印的屬性值，如：
其實收集表單項的值還有一種簡單的方法，像這樣
var params = $("form").serialize();
不過這樣需要提供name屬性值
$.get()和$.post()是類似的，接下來看一下$.ajax()
$.ajax()這個參數很多，常用的有這麼幾個：
type: 提交方式，get或post
url: 請求路徑
data: 請求參數
success: 執行成功後所調用的函數
把這個登陸驗證用這個改一下：
jsp改為：
<form> 使用者名稱<input type="text" name="user.username"><br> 密碼<input type="password" name="user.password"><br> <input type="button" value="點我驗證"> <img> </form>
js代碼改為：
<script type="text/javascript"> $(function(){ $(":button").click(function(){ var params = $("form").serialize(); //直接序列化表單 $.ajax({ type : "post", url : "${basePath}/user_login.action", data : params, success : function(result){ $("img").attr("src", '${basePath}'+result.src); //返回的是json資料 } }); }); }); </script>
其他的不變，這樣也能達到一樣的效果。當然，你也可以在struts2中用response對象響應ajax請求，就像在servlet中一樣。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
