struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

时间:2022-11-14 23:50:34

Web2.0的随波逐流,Ajax那是大放异彩,Struts2框架自己整合了对Ajax的原生支持(struts 2.1.7+,之前的版本可以通过插件实现),框架的整合只是使得JSON的创建变得异常简单,并且可以简单的融入到Struts2框架中,当然这只是在我们需要JSON的时候才会显得流光溢彩。

首先不谈Struts2的原生支持,我们自己写一个ajax示例,使用异步请求,直接请求action动作:

InfoAction.java

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
package cn.codeplus.action;

import com.opensymphony.xwork2.ActionSupport;

publicclass InfoAction extends ActionSupport {
privatestaticfinallong serialVersionUID =1359090410097337654L;

public String loadInfo() {
return SUCCESS;
}

}
struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

InfoAction仅仅是简单的返回"success"。

index.jsp

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
<!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>
struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

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只是一个简单网页,不列出了。

运行效果如下:

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

单击获取之后:

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

此时的页面源代码:

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

<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

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
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;
}
}
struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

新的InfoAction.java

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
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;
}


}
struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

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标签内,无需指明视图指向的界面。

最后就是运行结果啦:

点击“获取”按钮之后:

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

可见comments对象和content对象都被串行化到JSON数据了,不知道是不是版本的问题,很多资料都说使用transient修饰的属性不会被串行化到JSON的。

为了使content对象不被串行化到JSON,在不能舍弃其getter setter方法的时候,我们可以这样在content的getter方法上面加上注解:@JSON(serialize=false)

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)
...
@JSON(serialize
=false)
public String getContent() {
return content;
}

publicvoid setContent(String content) {
this.content = content;
}
...
struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

这时的结果如下:

struts2 + ajax(从后台获取json格式的数据返回到前端,然后前端用jquery对json数据进行解析)

@JSON和json类型的result都还有很多可选项,无非就是串行化谁,不串行化谁,返回数据的MIME类型,读者可以自行参考相关文档。

获取到JSON数据了,下一步就是在前台使用js处理JSON数据了,小弟js不精,喜欢使用jQuery解析,如有兴趣,且听下回分解jQuery解析JSON数据。

 

转载自:http://www.cnblogs.com/codeplus/archive/2011/07/18/2109316.html