struts2 + ajax(從后台獲取json格式的數據返回到前端,然后前端用jquery對json數據進行解析)


Web2.0的隨波逐流,Ajax那是大放異彩,Struts2框架自己整合了對Ajax的原生支持(struts 2.1.7+,之前的版本可以通過插件實現),框架的整合只是使得JSON的創建變得異常簡單,並且可以簡單的融入到Struts2框架中,當然這只是在我們需要JSON的時候才會顯得流光溢彩。

首先不談Struts2的原生支持,我們自己寫一個ajax示例,使用異步請求,直接請求action動作:

InfoAction.java

復制代碼
package cn.codeplus.action;

import com.opensymphony.xwork2.ActionSupport;

publicclass InfoAction extends ActionSupport {
privatestaticfinallong serialVersionUID =1359090410097337654L;

public String loadInfo() {
return SUCCESS;
}

}
復制代碼

InfoAction僅僅是簡單的返回"success"。

index.jsp

復制代碼
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>獲取</title>
<script type="text/javascript" src="js/jquery.js">
</script>
<script type="text/javascript">
function loadInfo() {
$(
"#info").load("loadInfo");
}
</script>
</head>
<body>
<input type="button" value="獲取" id="btnGet" onclick="loadInfo()"/>
<div id="info"></div>
</body>
</html>
復制代碼

index.jsp包含一個按鈕,點擊按鈕則會觸發異步請求事件。

struts.xml

<package name="ajaxDemo" extends="struts-default">
<action name="loadInfo" class="cn.codeplus.action.InfoAction" method="loadInfo">
<result name="success">/info.jsp</result>
</action>
</package>

可見上面的異步請求的結果將會是加載info.jsp,info.jsp只是一個簡單網頁,不列出了。

運行效果如下:

單擊獲取之后:

此時的頁面源代碼:

<div>標簽中嵌套了<title>標簽,不符合規范,其實我們只要吧info.jsp寫的沒有<title>之類的標簽,就不會出現這種情況了。

以上說的異步請求僅適用於請求單個文件,如果我們請求的是動態數據,並且數據需要以JSON格式返回,上面的方法將會顯得力不從心,這是struts2的原生支持就得出馬了。

使用struts2的ajax,必須在項目中引入struts2-json-plugin-2.2.1.jar,在版本2.1.7+都一句綁定在struts2發行包里面了(之前的版本可以在這下載)。記住,要引入struts2-json-plugin-2.2.1.jar。

這次我們使用另一個例子,模擬加載評論:

dto對象,Comment.java

復制代碼
package cn.codeplus.po;

publicclass Comment {
privatelong id;
private String nickname;
private String content;

publiclong getId() {
return id;
}

publicvoid setId(long id) {
this.id = id;
}

public String getNickname() {
return nickname;
}

publicvoid setNickname(String nickname) {
this.nickname = nickname;
}

public String getContent() {
return content;
}

publicvoid setContent(String content) {
this.content = content;
}
}
復制代碼

新的InfoAction.java

復制代碼
package cn.codeplus.action;

import java.util.ArrayList;
import java.util.List;

import cn.codeplus.po.Comment;

import com.opensymphony.xwork2.ActionSupport;

publicclass InfoAction extends ActionSupport {
privatestaticfinallong serialVersionUID =1359090410097337654L;

private List<Comment> comments =new ArrayList<Comment>();
//沒getter and setter方法的屬性不會被串行化到JSON
@SuppressWarnings("unused")
private String title;
//!!!使用transient修飾的屬性也會被串行化到JSON
privatetransient String content;

public String loadInfo() {
title
="123木頭人";
content
="你是木頭人,哈哈。";
loadComments();
return SUCCESS;
}

/**
* 加載留言信息
*/
privatevoid loadComments() {
Comment com1
=new Comment();
com1.setContent(
"很不錯嘛");
com1.setId(
1);
com1.setNickname(
"納尼");
Comment com2
=new Comment();
com2.setContent(
"喲西喲西");
com2.setId(
2);
com2.setNickname(
"小強");
comments.add(com1);
comments.add(com2);
}

public List<Comment> getComments() {
return comments;
}

publicvoid setComments(List<Comment> comments) {
this.comments = comments;
}

publicstaticlong getSerialversionuid() {
return serialVersionUID;
}

public String getContent() {
return content;
}

publicvoid setContent(String content) {
this.content = content;
}


}
復制代碼

index.jsp還是那個index.jsp。(*^__^*) 嘻嘻……

struts.xml變化挺大:

<package name="ajaxDemo" extends="json-default">
<action name="loadInfo" class="cn.codeplus.action.InfoAction" method="loadInfo">
<result name="success" type="json"></result>
</action>
</package>

在struts.xml中:

首先,package extends由struts-default轉變為json-default,這是必須的,只用在json-default中才包含下面使用的result type為 json。

然后就是result類型需顯示指明為json,result標簽內,無需指明視圖指向的界面。

最后就是運行結果啦:

點擊“獲取”按鈕之后:

可見comments對象和content對象都被串行化到JSON數據了,不知道是不是版本的問題,很多資料都說使用transient修飾的屬性不會被串行化到JSON的。

為了使content對象不被串行化到JSON,在不能舍棄其getter setter方法的時候,我們可以這樣在content的getter方法上面加上注解:@JSON(serialize=false)

復制代碼
...
@JSON(serialize
=false)
public String getContent() {
return content;
}

publicvoid setContent(String content) {
this.content = content;
}
...
復制代碼

這時的結果如下:

@JSON和json類型的result都還有很多可選項,無非就是串行化誰,不串行化誰,返回數據的MIME類型,讀者可以自行參考相關文檔。

獲取到JSON數據了,下一步就是在前台使用js處理JSON數據了,小弟js不精,喜歡使用jQuery解析,如有興趣,且聽下回分解jQuery解析JSON數據。

 

轉載自:http://www.cnblogs.com/codeplus/archive/2011/07/18/2109316.html


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM