struts2用response怎么将json值返回到页面javascript解析,这里介绍一个struts2与json整合后包的用法。
1.准备工作
①ajax使用Jquery:jquery-1.4.2.min.js
②struts2与json的依赖包:struts2-json-plugin-2.2.3.jar
PS:版本可自己控制!~
2.过程
①引入json依赖包
②编写action类
③配置struts.xml
④编写页面
⑤测试
3.实例
① action类,JsonAction 注意包名
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
package
com.zxt.action;
import
com.opensymphony.xwork2.ActionSupport;
/**
*
* @Title: JsonAction.java
* @Package com.zxt.action
* @Description:struts2 + ajax + json用例
* @author zxt
* @date 2011-12-6 上午10:38:51
* @version V1.0
*/
public
class
JsonAction
extends
ActionSupport {
/**
*
*/
private
static
final
long
serialVersionUID = 7443363719737618408L;
/**
* 姓名
*/
private
String name;
/**
* 身高
*/
private
String inch;
/**
* ajax返回结果,也可是其他类型的,这里以String类型为例
*/
private
String result;
@Override
public
String execute()
throws
Exception {
// TODO Auto-generated method stub
if
(
"张三"
.equals(name)) {
result =
"身份验证通过,身高为"
+ inch;
}
else
result =
"不是张三!"
;
return
SUCCESS;
}
public
String getName() {
return
name;
}
public
void
setName(String name) {
this
.name = name;
}
public
String getInch() {
return
inch;
}
public
void
setInch(String inch) {
this
.inch = inch;
}
/**
*
* @Title: getResult
* @Description:json调取结果
* @param @return
* @return String
* @throws
*/
public
String getResult() {
return
result;
}
}
|
②struts配置。 struts.xml
创建一个新的package,引入json-default
1
2
3
4
5
6
7
|
<
package
name
=
"ajax"
extends
=
"json-default"
>
<
action
name
=
"jsonAjax"
class
=
"com.zxt.action.JsonAction"
>
<!-- 将返回类型设置为json -->
<
result
type
=
"json"
></
result
>
</
action
>
</
package
>
|
③ 页面ajax写法,json.jsp
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
<%@ page language=
"java"
contentType=
"text/html; charset=UTF-8"
pageEncoding=
"UTF-8"
%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+
"://"
+request.getServerName()+
":"
+request.getServerPort()+path+
"/"
;
%>
<!DOCTYPE html PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
>
<html>
<head>
<base href=
"<%=basePath%>"
>
<meta http-equiv=
"Content-Type"
content=
"text/html; charset=ISO-8859-1"
>
<title>测试</title>
<script type=
"text/javascript"
src=
"include/js/jquery-1.4.2.min.js"
></script>
<script type=
"text/javascript"
>
$(
function
() {
$(
"#tj"
).click(
function
() {
//提交的参数,name和inch是和struts action中对应的接收变量
var
params = {
name : $(
"#xm"
).val(),
inch : $(
"#sg"
).val()
};
$.ajax({
type:
"POST"
,
url:
"jsonAjax.action"
,
data: params,
dataType:
"text"
,
//ajax返回值设置为text(json格式也可用它返回,可打印出结果,也可设置成json)
success:
function
(json){
var
obj = $.parseJSON(json);
//使用这个方法解析json
var
state_value = obj.result;
//result是和action中定义的result变量的get方法对应的
alert(state_value);
},
error:
function
(json){
alert(
"json="
+ json);
return
false
;
}
});
});
});
</script>
</head>
<body>
<span>姓名:</span><input id=
"xm"
type=
"text"
>
<br/>
<span>身高:</span><input id=
"sg"
type=
"text"
>
<br/>
<input type=
"button"
value=
"提交"
id=
"tj"
>
</body>
</html>
|
④启动站点,测试吧!~
按这个走完,一切ok。准备测试吧,看看它的强大效果!~O(∩_∩)O~
这只是最简单的一个例子(前后台交互),他能做的工作是非常多的,尽情发挥你的思想和才能吧!~
good luck!
PS:
JQuery解析list的时候可参考,下面的小例子
1
2
3
4
5
|
var
data = {
"list"
:[{
"id"
:1,
"content"
:
"测试信息1111"
},{
"id"
:2,
"content"
:
"测试信息2222"
}]}
$.each(data.list,
function
(i, item) {
alert(item.id);
alert(item.content);
});
|