實現異步通信，用json與jquery實現起來相當簡便。
Struts2整合jQuery
Struts2中主要的業務操作都是通過Action來完成的，此時就需要jQuery來訪問Struts2的Action： $.post("Action",……)
1.1 registe.jsp頁面：
功能：用戶註冊，首先輸入用戶名：
正確：用戶名沒有被註冊，你可以使用；
錯誤：用戶名已經被註冊；
1.2 jQuery代碼：
function checkkey()
{
var url = 'showAllInstitute.action';
var params = {companyKey:$('#ckey').attr('value')};
jQuery.post(url, params, callbackFun);
}
function callbackFun(data)
{
$('#warn').html(data); //顯示返回的數據
}
1.3 HTML：當文本框失去焦點時，觸發回調事件。
<%@ page language="java" import="java.util.*" pageEncoding="gb2312"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<script language="JavaScript" src="js/jquery-1.6.3.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'jquery.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<DIV class=line><LABEL class=big id=lblName>用戶註冊</LABEL>
<INPUT id='ckey' name="ckey" οnblur="checkkey();"><span id="warn"></span>
</DIV>
</body>
</html>
說明：
1）當文本框‘ckey’失去焦點時：調用“checkkey”函數；
2） “checkkey”函數分別確定兩個信息：
3） 異步訪問：'showAllInstitute.action'——判斷標識是否正確的Action類。
4）參數：{companyKey:$('#ckey').attr('value')}，一個以json格式拼寫的參數。
5）發出異步請求：jQuery.post(url, params, callbackFun);
json格式如下：
1.4 Action代碼：
public String queryAllInstitutes()
{
try
{
String remessage;
if("jquery".equals(companyKey))
remessage="用戶名已經被註冊";
else
remessage="用戶名沒有被註冊，您可以使用此用戶名";
HttpServletResponse response = ServletActionContext.getResponse();
//response.setContentType("text/html"); //火狐瀏覽器必須加上這句
response.setCharacterEncoding("UTF-8");
response.getWriter().write(remessage);
}
catch (Throwable e)
{
e.printStackTrace();
}
return null;
}
1.5 struts.xml中的配置
<action name="showAllInstitute" class="net.hncu.struts2.action.ShowAllInstituteAction" method="queryAllInstitutes">
<!-- 定義處理結果與視圖資源之間的關係-->
</action>備註：
返回值:XMLHttpRequestjQuery.post(url, [data],[callback],[type])
概述
通過遠程 HTTP POST 請求載入信息。
這是一個簡單的 POST 請求功能以取代複雜 $.ajax 。請求成功時可調用回調函數。如果需要在出錯時執行函數，請使用 $.ajax。
參數
url,[data],[callback],[type]String,Map,Function,StringV1.0
url:發送請求地址。
data:待發送 Key/value 參數。
callback:發送成功時回調函數。
type:返回內容格式，xml, html, script, json, text, _default。
示例
1描述:
請求 test.php 網頁，忽略返回值：
jQuery 代碼:
$.post("test.php");2描述:
請求 test.php 頁面，並一起發送一些額外的數據（同時仍然忽略返回值）：
jQuery 代碼:
$.post("test.php", { name: "John", time: "2pm" } );3描述:
向服務器傳遞數據數組（同時仍然忽略返回值）：
jQuery 代碼:
$.post("test.php", { 'choices[]': ["Jon", "Susan"] });4描述:
使用 ajax 請求發送表單數據：
jQuery 代碼:
$.post("test.php", $("#testform").serialize());5描述:
輸出來自請求頁面 test.php 的結果（HTML 或 XML，取決於所返回的內容）：
jQuery 代碼:
$.post("test.php", function(data){
alert("Data Loaded: " + data);
});6描述:
向頁面 test.php 發送數據，並輸出結果（HTML 或 XML，取決於所返回的內容）：
jQuery 代碼:
$.post("test.php", { name: "John", time: "2pm" },
function(data){
alert("Data Loaded: " + data);
});7描述:
獲得 test.php 頁面的內容，並存儲爲 XMLHttpResponse 對象，並通過 process() 這個 JavaScript 函數進行處理：
jQuery 代碼:
$.post("test.php", { name: "John", time: "2pm" },
function(data){
process(data);
}, "xml");8描述:
獲得 test.php 頁面返回的 json 格式的內容：：
jQuery 代碼:
$.post("test.php", { "func": "getNameAndTime" },
function(data){
alert(data.name); // John
console.log(data.time); // 2pm
}, "json");