文章来源: 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"?>
-
- <!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配置 :
3.show.jsp配置:
4.tableopen.jsp弹出层插件:
- <!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">
-
- </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"/></<
分享到:
评论