今天來說說如何用Jquery實(shí)現(xiàn)Struts 2中的Ajax。
1、將struts2的json插件加入web工程的lib，jsonplugin的下載地址：http://code.google.com/p/jsonplugin/downloads/list
2、struts.xml添加專為ajax使用的package
<package name="ajax" extends="json-default"> |
<action name="ajaxRequest" |
class="org.david.struts2.HelloWorld"> |
<result type="json"></result> |
3、helloworld.jsp
<SCRIPT type="text/javascript" src="js/jquery.js"></script>
<SCRIPT type="text/javascript">
function clickButton()
{
var url = 'ajaxRequest.action';
var params = {
name:$('#name').attr('value')
};
$.post(url, params, callbackFun, 'json');
}
function callbackFun(data)
{
alert(data.result);//對(duì)應(yīng)HelloWorld類的message屬性
//獲取數(shù)據(jù)后渲染頁面
}
</SCRIPT>
<input id="name" type="text">
<input type="button" value="ok" onclick="javascript:clickButton();">
4、HelloWorld.java
package org.david.struts2;
public class HelloWorld {
private String name;
private String result;
// ajax請(qǐng)求參數(shù)賦值
public void setName(String name) {
this.name = name;
}
// ajax返回結(jié)果
public String getResult() {
return result;
}
public String execute() {
this.result = "Hello! " + this.name + ".";
return "success";
}
}
順便說一下這個(gè)HelloWorld的代碼，如果需要在類里用到一個(gè)輔助類，如操作JDBC的數(shù)據(jù)庫訪問類，修改如下
package org.david.struts2; |
public class HelloWorld { |
private String result;<BR> private DBOperator dbOperator;<BR> <BR> |
<SPAN style="COLOR: #999999">@JSON(serialize=<SPAN style="COLOR: #3366ff">false</SPAN>) </SPAN> <BR>priavate DBOperator getDbOperator()<BR> { |
return this.dbOperator;<BR> } |
private void setDbOperator(DBOperator dbOperator)<BR>{<BR> this.dbOperator=dbOperator;<BR>} |
public void setName(String name) { |
public String getResult() { |
public String execute() { |
this.result = "Hello! " + this.name + "."; |
其實(shí)這樣寫主要是我做項(xiàng)目的時(shí)候要用到Spring的注入，必須這樣做。好了，說正文。這個(gè)時(shí)候在getter 訪問器上一定要加上@JSON(serialisze=false)，這樣才能夠正常請(qǐng)問這個(gè)result的值。如果不這樣做的話，在前臺(tái)頁面是無法得到JSON值的。
順便來說說jquery里的參數(shù)傳遞。
var params = {name:$('#name').attr('value')};
這只是一個(gè)值，如果是多個(gè)值，中間用“,”隔開（英文的逗號(hào)), 如
var pageNumber=10;
var params={name:$("#name").val(),id:10,pageNumber:pageNumber};
格式大概就是{參數(shù)名:值,參數(shù)名:值} 這個(gè)可以去查一下，基本就是這樣子寫，里面可以是多個(gè)鍵值對(duì)，如果不指定參數(shù)的話 直接兩個(gè)花括號(hào)括起來就可以了。如:
var params={};
jquery提供的ajax函數(shù)還有好幾個(gè), 如$.post(url,[data],[callbackFun],[type])， $.get(url, [data], [callback], [type])
$.getJSON(url, [data], [callback])等
這個(gè)大家可以去查一下文檔,我這說的三個(gè)函數(shù)都是$.ajax()方法的另外一種版本而已。
