Struts2+JQuery+Json及JQuery相关插件的例子

注意事项：

1.开发时，应将工程及相应的页面数据库编码均设为：utf8解决乱码问题；

2.当前开发版本为struts2.1.8，不同的struts2版本会有不同的jar包需要引入，具体见readme.txt

3.autocomplete插件不是很完善，尚不能处理json数据；弹出层框架只针对图片(可修改格式适应其它形式)

readme.txt:

view plaincopy to clipboardprint?

1. 1.JQuery的Ajax实现并与struts2的结合
2. 2.配置过程：
3. a.新建web项目;
4. b.修改web.xml文件
5. c.在src下添加struts.xml文件,添加jar包支持:freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar
6. commons-io.jar xwork-core-2.1.6.jar（这个包加上版本号，是因为下文要提到它），注意jar包支持
7. 这六个包是struts必须依赖的jar包
8. d.配置jsp文件,在jsp里面添加jquery支持
9. e.配置action
10. f ( 一)在struts2.1.6之前的版本：
11. 添加相应的json包:json-lib.jar jsonplugin.jar 这里要注意很重要的一点，因为json大量引用了Apache commons的包，所以这里要一并加入，
12. 需要的commons包共4个，除了commons的包外，还需要引入一个 ezmorph的包，所以这一步一共要引入7个包，列出如下：
13. commons-collections.jar commons-lang.jar
14. commons-beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个
15. (二)struts2.1.6，添加jsonplugin0.34或者jsonplugin0.7
16. （三)struts2.1.8则添加json-lib-2.2.3.jar,struts2-json-plugin,struts2-junit-plugin
19. 3.插件使用：
20. 1.validation插件：详见table-validation.jsp，主要为引入一个jquery.validate.js，获取相应的属性名来进行验证;
21. 2.tablesort插件：目前用的是兼容中文的官网版本,一是可以实现自动排序，二是支持中文;要注意在table当中的格式，这点很重要
22. 3.tablesortpager插件
26. JQuery与Json结合的一些注意事项：
27. 1.$.get(url,data,function(data){
28. eval(data);
29. })
30. eval(data)将数据转换为js对象；
31. 实际上如果返回的json对象，可通过将参数直接命名为json即可，如下
32. $.get(url.data,function(data){},"json")
34. 2.取json属性时，尽量用中括号方式，原因是如果有数字属性会发生不识别的现象
35. eg:var a=obj["31001"];
36. //obj.31001则可能出错
37. 解决办法有其它方式：比如将属性值31001改为s31001
39. 3.乱码问题:
40. 在struts1.2中，通过设置表头的编码来解决乱码问题，注意对于xml和json，要分别设置为text/xml和text/json
41. eg:response.setContentType("text/json; charset=utf-8");

1.JQuery的Ajax实现并与struts2的结合
2.配置过程：
a.新建web项目;
b.修改web.xml文件
c.在src下添加struts.xml文件,添加jar包支持:freemarker.jar ognl.jar struts2-core.jar commons-fileupload.jar
commons-io.jar xwork-core-2.1.6.jar（这个包加上版本号，是因为下文要提到它），注意jar包支持
这六个包是struts必须依赖的jar包
d.配置jsp文件,在jsp里面添加jquery支持
e.配置action
f ( 一)在struts2.1.6之前的版本：
添加相应的json包:json-lib.jar jsonplugin.jar 这里要注意很重要的一点，因为json大量引用了Apache commons的包，所以这里要一并加入，
需要的commons包共4个，除了commons的包外，还需要引入一个 ezmorph的包，所以这一步一共要引入7个包，列出如下：
commons-collections.jar commons-lang.jar
commons-beanutils.jar commons-logging.jar ezmorph.jar 再加上json的两个包共七个
(二)struts2.1.6，添加jsonplugin0.34或者jsonplugin0.7
（三)struts2.1.8则添加json-lib-2.2.3.jar,struts2-json-plugin,struts2-junit-plugin
3.插件使用：
1.validation插件：详见table-validation.jsp，主要为引入一个jquery.validate.js，获取相应的属性名来进行验证;
2.tablesort插件：目前用的是兼容中文的官网版本,一是可以实现自动排序，二是支持中文;要注意在table当中的格式，这点很重要
3.tablesortpager插件
JQuery与Json结合的一些注意事项：
1.$.get(url,data,function(data){
eval(data);
})
eval(data)将数据转换为js对象；
实际上如果返回的json对象，可通过将参数直接命名为json即可，如下
$.get(url.data,function(data){},"json")
2.取json属性时，尽量用中括号方式，原因是如果有数字属性会发生不识别的现象
eg:var a=obj["31001"];
//obj.31001则可能出错
解决办法有其它方式：比如将属性值31001改为s31001
3.乱码问题:
在struts1.2中，通过设置表头的编码来解决乱码问题，注意对于xml和json，要分别设置为text/xml和text/json
eg:response.setContentType("text/json; charset=utf-8");

1.struts.xml配置：

view plaincopy to clipboardprint?

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!-- 指定Struts 2配置文件的DTD信息 -->
3. <!DOCTYPE struts PUBLIC
4. "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
5. "http://struts.apache.org/dtds/struts-2.0.dtd">
6. <struts>
7. <constant name="struts.i18n.encoding" value="utf-8"></constant>
8. <package name="S2SHJQuery" extends="json-default">
9. <action name="show" class="action.ShowAction">
10. <result type="json"/>
11. </action>
12. </package>
13. </struts>

<?xml version="1.0" encoding="UTF-8"?>
<!-- 指定Struts 2配置文件的DTD信息 -->
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.<a href=http://biancheng.dnbcw.info/apache/>apache</a>.org/dtds/struts-2.0.dtd">
<struts>
<constant name="struts.i18n.encoding" value="utf-8"></constant>
<package name="S2SHJQuery" extends="json-default">
<action name="show" class="action.ShowAction">
<result type="json"/>
</action>
</package>
</struts>

2.ShowAction.java配置 ：

view plaincopy to clipboardprint?

1. package action;
3. import java.util.ArrayList;
4. import java.util.List;
5. import java.util.Map;
7. import org.apache.struts2.json.annotations.JSON;
9. import com.opensymphony.xwork2.ActionSupport;
10. public class ShowAction extends ActionSupport {
11. private String testvalue;
12. private String result;
13. private List<String> list;
14. private List<User> userlist;
15. private User user;
16. private Map<String, User> map;
17. private String[] autoarray;
18. public String[] getAutoarray() {
19. return autoarray;
20. }
21. public void setAutoarray(String[] autoarray) {
22. this.autoarray = autoarray;
23. }
24. @JSON(serialize=false)
25. public Map<String, User> getMap() {
26. return map;
27. }
28. public void setMap(Map<String, User> map) {
29. this.map = map;
30. }
31. @JSON(serialize=false)
32. public User getUser() {
33. return user;
34. }
35. public void setUser(User user) {
36. this.user = user;
37. }
38. @JSON(serialize=false)
39. public List<User> getUserlist() {
40. return userlist;
41. }
42. public void setUserlist(List<User> userlist) {
43. this.userlist = userlist;
44. }
45. @JSON(serialize=false)
46. public List<String> getList() {
47. return list;
48. }
49. public void setList(List<String> list) {
50. this.list = list;
51. }
53. public void setTestvalue(String testvalue) {
54. this.testvalue = testvalue;
55. }
56. @JSON(serialize=false)
57. public String getTestvalue() {
58. return testvalue;
59. }
60. @JSON(serialize=false)
61. public String getResult() {
62. return result;
63. }
64. public void setResult(String result) {
65. this.result = result;
66. }
67. @Override
68. public String execute() throws Exception {
69. // TODO Auto-generated method stub
70. System.out.println("test is ok: "+testvalue);
71. //1.????string
72. /*int i=9;
73. //result=""+i+"";
74. result="中国";*/
75. //2.list?
76. /*list=new ArrayList<String>();
77. list.add("allen");
78. list.add("中国");
79. list.add("adc");*/
80. //3.list?а?User
81. /*userlist=new ArrayList<User>();
82. User user1=new User();
83. user1.setPassword(1);
84. user1.setUsername("username1");
85. User user2=new User();
86. user2.setPassword(2);
87. user2.setUsername("username2");
88. User user3=new User();
89. user3.setPassword(3);
90. user3.setUsername("username3");
91. userlist.add(user1);
92. userlist.add(user2);
93. userlist.add(user3);*/
94. //4.User???????
95. /*user=new User();
96. user.setPassword(1);
97. String username="中国";
98. user.setUsername(username);
99. System.out.println(user.getUsername());
100. */
101. //5.map????
102. /*map=new HashMap<String, User>();
103. User user1=new User();
104. user1.setPassword(1);
105. user1.setUsername("username1");
106. User user2=new User();
107. user2.setPassword(2);
108. user2.setUsername("username2");
109. User user3=new User();
110. user3.setPassword(3);
111. user3.setUsername("username3");
112. map.put("s1",user1 );
113. map.put("s2",user2 );
114. map.put("s3",user3 );*/
115. /*map=new HashMap<String, String>();//??????String,string???
116. map.put("s1","user1");
117. map.put("s2","user2");
118. map.put("s3","user3");*/
119. //7.直接传递数祖
120. autoarray=new String[3];
121. autoarray[0]="a";
122. autoarray[1]="b";
123. autoarray[2]="c";
125. return SUCCESS;
126. }
129. }

package action;
import java.util.ArrayList;
import java.util.List;
import java.util.Map;
import org.apache.struts2.json.annotations.JSON;
import com.opensymphony.xwork2.ActionSupport;
public class ShowAction extends ActionSupport {
private String testvalue;
private String result;
private List<String> list;
private List<User> userlist;
private User user;
private Map<String, User> map;
private String[] autoarray;
public String[] getAutoarray() {
return autoarray;
}
public void setAutoarray(String[] autoarray) {
this.autoarray = autoarray;
}
@JSON(serialize=false)
public Map<String, User> getMap() {
return map;
}
public void setMap(Map<String, User> map) {
this.map = map;
}
@JSON(serialize=false)
public User getUser() {
return user;
}
public void setUser(User user) {
this.user = user;
}
@JSON(serialize=false)
public List<User> getUserlist() {
return userlist;
}
public void setUserlist(List<User> userlist) {
this.userlist = userlist;
}
@JSON(serialize=false)
public List<String> getList() {
return list;
}
public void setList(List<String> list) {
this.list = list;
}
public void setTestvalue(String testvalue) {
this.testvalue = testvalue;
}
@JSON(serialize=false)
public String getTestvalue() {
return testvalue;
}
@JSON(serialize=false)
public String getResult() {
return result;
}
public void setResult(String result) {
this.result = result;
}
@Override
public String execute() throws Exception {
// TODO Auto-generated method stub
System.out.println("test is ok: "+testvalue);
//1.????string
/*int i=9;
//result=""+i+"";
result="中国";*/
//2.list?
/*list=new ArrayList<String>();
list.add("allen");
list.add("中国");
list.add("adc");*/
//3.list?а?User
/*userlist=new ArrayList<User>();
User user1=new User();
user1.setPassword(1);
user1.setUsername("username1");
User user2=new User();
user2.setPassword(2);
user2.setUsername("username2");
User user3=new User();
user3.setPassword(3);
user3.setUsername("username3");
userlist.add(user1);
userlist.add(user2);
userlist.add(user3);*/
//4.User???????
/*user=new User();
user.setPassword(1);
String username="中国";
user.setUsername(username);
System.out.println(user.getUsername());
*/
//5.map????
/*map=new HashMap<String, User>();
User user1=new User();
user1.setPassword(1);
user1.setUsername("username1");
User user2=new User();
user2.setPassword(2);
user2.setUsername("username2");
User user3=new User();
user3.setPassword(3);
user3.setUsername("username3");
map.put("s1",user1 );
map.put("s2",user2 );
map.put("s3",user3 );*/
/*map=new HashMap<String, String>();//??????String,string???
map.put("s1","user1");
map.put("s2","user2");
map.put("s3","user3");*/
//7.直接传递数祖
autoarray=new String[3];
autoarray[0]="a";
autoarray[1]="b";
autoarray[2]="c";
return SUCCESS;
}
}

3.show.jsp配置:

view plaincopy to clipboardprint?

1. <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
2. <%
3. String path = request.getContextPath();
4. String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
5. %>
7. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
8. <html>
9. <head>
10. <mce:script type="text/javascript" src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"></mce:script>
11. <base href="<%=basePath%>">
12. <title>struts2+jquery+json</title>
13. <mce:script type="text/javascript"><!--
14. //1.struts2+jquery+json单独传递单个参数
15. /*$(function(){
16. $("#jquerytest").click(function(){
17. var params={testvalue:$('#test').val()};
18. $.ajax({
19. url:"show.action",
20. data:params,
21. type:'post',
22. dataType:'json',
23. success:function(data){
24. //data += decodeURI(data.shtml) ;
25. alert("成功");
26. alert(data.result);
27. },
28. error: function(){
29. alert("失败");
30. }
31. })
32. })
33. })*/
34. //2.jquery单独传递含单个参数的list
35. /*$(function(){
36. $("#jquerytest").click(function(){
37. var params={testvalue:$('#test').val()};
38. $.ajax({
39. url:"show.action",
40. data:params,
41. type:'post',
42. dataType:'json',
43. success:function(data){
44. var jsonobject=data.list;
45. for(var j=0;j<jsonobject.length;j++)
46. {
47. alert(jsonobject[j]);
48. }
49. },
50. error: function(){
51. alert("失败");
52. }
53. })
54. })
55. })*/
56. //3.jquery单独传递含对象类型User的list
57. $(function(){
58. $("#jquerytest").click(function(){
59. var params={testvalue:$('#test').val()};
60. $.ajax({
61. url:"show.action",
62. data:params,
63. type:'post',
64. dataType:'json',
65. success:function(data){
66. var jsonobject=data.userlist;
67. /*for(var j=0;j<jsonobject.length;j++)
68. {
69. alert(jsonobject[j].username);
70. alert(jsonobject[j].password);
71. }
72. */
73. $.each(jsonobject,function(key,value){
74. alert(key+" "+value.username);
75. alert(key+" "+value.password);
76. })
77. }
78. ,
79. error: function(){
80. alert("失败");
81. }
82. })
83. })
84. })
85. //4.jquery单独传递User对象类型
86. /*$(function(){
87. $("#jquerytest").click(function(){
88. var params={testvalue:$('#test').val()};
89. $.ajax({
90. url:"show.action",
91. data:params,
92. type:'post',
93. dataType:'json',
94. contentType: "application/x-www-form-urlencoded; charset=UTF-8",
95. success:function(data){
96. var jsonobject=data.user;
97. alert(jsonobject.username);
98. },
99. error: function(){
100. alert("失败");
101. }
102. })
103. })
104. })*/
105. //5.jquery传递含User对象类型的map类型
106. /*$(function(){
107. $("#jquerytest").click(function(){
108. var params={testvalue:$('#test').val()};
109. $.ajax({
110. url:"show.action",
111. data:params,
112. type:'post',
113. dataType:'json',
114. success:function(data){
115. var jsonobject=data.map;
116. alert(data.map.s1.username);//一步一步获取值
117. $.each(data.map,function(key,value){
118. alert(key+": "+value.username);
119. })
120. },
121. error: function(){
122. alert("失败");
123. }
124. })
125. })
126. })*/
127. // --></mce:script>
128. </head>
129. <body>
130. <form>
131. <input type="button" value="JQuery" id="jquerytest"><br>
132. <input type="text" value="美国" name="test" id="test">
133. </form>
134. </body>
135. </html>

<%@ page language="java" import="java.util.*" 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">
<html>
<head>
<mce:script type="text/javascript" src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js"></mce:script>
<base href="<%=basePath%>">
<title>struts2+jquery+json</title>
<mce:script type="text/javascript"><!--
//1.struts2+jquery+json单独传递单个参数
/*$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
success:function(data){
//data += decodeURI(data.shtml) ;
alert("成功");
alert(data.result);
},
error: function(){
alert("失败");
}
})
})
})*/
//2.jquery单独传递含单个参数的list
/*$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
success:function(data){
var jsonobject=data.list;
for(var j=0;j<jsonobject.length;j++)
{
alert(jsonobject[j]);
}
},
error: function(){
alert("失败");
}
})
})
})*/
//3.jquery单独传递含对象类型User的list
$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
success:function(data){
var jsonobject=data.userlist;
/*for(var j=0;j<jsonobject.length;j++)
{
alert(jsonobject[j].username);
alert(jsonobject[j].password);
}
*/
$.each(jsonobject,function(key,value){
alert(key+" "+value.username);
alert(key+" "+value.password);
})
}
,
error: function(){
alert("失败");
}
})
})
})
//4.jquery单独传递User对象类型
/*$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
contentType: "application/x-www-form-urlencoded; charset=UTF-8",
success:function(data){
var jsonobject=data.user;
alert(jsonobject.username);
},
error: function(){
alert("失败");
}
})
})
})*/
//5.jquery传递含User对象类型的map类型
/*$(function(){
$("#jquerytest").click(function(){
var params={testvalue:$('#test').val()};
$.ajax({
url:"show.action",
data:params,
type:'post',
dataType:'json',
success:function(data){
var jsonobject=data.map;
alert(data.map.s1.username);//一步一步获取值
$.each(data.map,function(key,value){
alert(key+": "+value.username);
})
},
error: function(){
alert("失败");
}
})
})
})*/
// --></mce:script>
</head>
<body>
<form>
<input type="button" value="JQuery"  id="jquerytest"><br>
<input type="text" value="美国" name="test" id="test">
</form>
</body>
</html>

http://www.360doc.com/content/10/0731/19/117897_42788515.shtml