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

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

文章来源: 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:

?????????????

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配置：

?????????????

<?xml version="1.0" encoding="UTF-8"?> <!-- 指定Struts 2配置文件的DTD信息 --> <!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配置 ：

?????????????

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配置:

????????????????????

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

?

4.tableopen.jsp弹出层插件:

??????????????

查看全文