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

最新推荐文章于 2024-09-29 08:44:52 发布

爱在乌托邦

最新推荐文章于 2024-09-29 08:44:52 发布

阅读量72

点赞数

文章标签： jQuery json Struts Ajax JavaScript ViewUI

本文链接：https://blog.csdn.net/wutuobangoracle/article/details/83678864

版权

文章来源: http://www.360doc.com/content/10/0731/19/117897_42788515.shtml#

注意事项：

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

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

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

readme.txt:

view plain copy to clipboard print ?

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.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 plain copy to clipboard print ?

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE struts PUBLIC
"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
"http://struts.apache.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>

<?xml version="1.0" encoding="UTF-8"?>  <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN" "http://struts.apache.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 plain copy to clipboard print ?

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;
}
}

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 plain copy to clipboard print ?

<%@ 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>

<%@ 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"></mce:script> </head> <body> <form> <input type="button" value="JQuery" id="jquerytest"><br> <input type="text" value="美国" name="test" id="test"> </form> </body> </html>

4.tableopen.jsp弹出层插件:

view plain copy to clipboard print ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Thickbox Plus - Download by http://www.codefans.net</title>
<mce:style type="text/css" media="all"><!--
@import "css/global.css";
--></mce:style><style type="text/css" media="all" mce_bogus="1">@import "css/global.css";</style>
<mce:script src="/S2SHJQuery/js/jquery.js" mce_src="S2SHJQuery/js/jquery.js" type="text/javascript"></mce:script>
<mce:script src="/S2SHJQuery/lib/thickbox_plus.js" mce_src="S2SHJQuery/lib/thickbox_plus.js" type="text/javascript"></mce:script>
</head>
<body>
<div id="contentPad">
<h1>Thickbox Plus</h1>
<div>
<a href="images/image1.jpg" mce_href="images/image1.jpg" title="Sample caption" class="thickbox"><img src="images/image1_t.jpg" mce_src="images/image1_t.jpg" alt="Image 1" /></a>
<a href="images/image2.jpg" mce_href="images/image2.jpg" title="Another sample caption" class="thickbox"><img src="images/image2_t.jpg" mce_src="images/image2_t.jpg" alt="Image 2"/></