Struts2+JQuery插件的使用

Struts2—使用JQuery插件(2) 本节介绍更多更高级的JQuery控件.1.首先做好基本配置,这次将JSON 插件一起加入struts2xml文件struts-jquery.xml2.选项卡效果2.1选项卡的内容在本地新建localtab.jsp关于JqueryUI 插件:在Jquery官方,提供了很多的jquery插件,其中jqueryUI 是一套关于用户界面的插件,使用它可以很方便的做出各种界面效果,而且还提供了themes 各种主题包的下载,可以很方便的更换主题在为Struts2做插件的时候,struts2-jquery插件将jquery官方的jquery核心js文件,还有jquery的UI插件,以及主题(themes)都打进了jar包中,如下图在localtab.jsp文件中添加如下代码:运行该jsp文件,效果如下:字体有些大,我们可以通过css将字体进行调整上面我们使用<sj:head >标签引入jquery库的时候,只是使用<sj:head jqueryui="true" />引入了jqueyUI,此时会有一个默认的themes被应用。

我们可以查看生成的HTML 源代码:可以看到themes的名称为smoothness,那么插件包中都提供了那些themes呢,我们可以查看struts2-jquery-plugin-1.8.X.ja文件:可以看到提供了cupertino ,darkness,lightness, redmod,smoothness 这样的几个风格,其中smoothness是默认的风格.2.2改变风格如何改变风格呢?很简单在<sj:head />中只需要给jquerytheme属性设置风格名称即可:做完这个设置之后,浏览页面:可以看到这个页面的风格发生了变化插件包中提供的主题毕竟有限,如果我们需要更多的主题,我们可以到jquery官方网站下载更多的主题,甚至可以使用官网提供的在线工具定制出我们需要的主题.Jquey首页: 定制主题(theme)下载定制好的主题:下载之后的文件, 这里我下载的是名称为start的themes:进入development-bundle 文件夹:进入themes文件夹里面有两个themes,一个是base,一个是start,这两个文件夹的目录结构都是一样的,不光是这两个一样,所有的jquery UI的themes目录结构都是一样的,里面都是一些css样式,还有图片文件。

关于下载包中的其它文件,struts2-jquery-plugin-1.8.2.jar 文件中已近包含了。

我们只需要themes文件夹中的主题文件夹那么我们如何在项目中应用下载的主题呢?参考官方文档中<sj:head> 标签的说明,我们可以做如下的操作:在WEB-Root中新建一个文件夹:将下载的start 主题包拷贝到这个文件夹中:我们发现下载的ui.theme.css 文件与标准jar包中的不一样。

仔细对比发现下载的start中的ui.theme.css并不完整,其它的部分分布在ui.tabs.css,ui.slider.css文件中。

所以要想使用完整的,只需要将其它部分的加入进来即可。

仔细观察我们发现还有一个文件,jquery-ui.1.7.2.custom.css 文件,该文件其实是在我们网站下载的时候定制的,我们定制了多少内容,它里面就有多少内容。

而我下载的时候定制的是全部的内容,所以只需要将该文件的文件名改名为ui.theme.css,然后将其它的css文件删除即可.修改<sj:head> 标签,指定主题名称,和自定义主题安装目录:运行jsp:2.3定制皮肤多下载几个themes 放入到应用各中。

在jsp 页面中放几个链接,当点击链接的时候传递 themes 的名称到Action ,这里不需要编写Action 类,使用默认的Action 即可,只需要在 struts-jquery.xml 文件中做配置即可,让重新返回到 jsp 页面,然后我们可以使用标签取出传递的themes 名称即可以下是下载的thems :在localtab.jsp 页面上添加链接配置Action 。

在struts-jquery.xml文件中配置修改localtab.jsp页面:2.4选项卡的内容在远程服务器,通过ajax 方式获取新建remotetab.jsp 文件,内容如下新建RemoteTabAction 类部署Action,在struts-jquery.xml新建tabContent.jsp3.日历控件新建datepicker.jsp 文件我们发现出来的是英文界面。

在struts2-jquery-plugin-1.8.2.jar文件中可以看到一些国际化文件:这些js 文件需要引入到页面才会生效,默认是英文。

查看<sj:head>标记的说明文档,我们发现了locale 这样一个属性,这个属性可以用来导入国际化的js 文件,那那这个属性的值写成什么呢?当然不能胡写,我们仔细观察这些js 文件,因为我们需要用到日历,所以仔细观察日历相关的js 文件:很显然,如果要显示简体中文,应该写: zh-CN ,所以修改datepicker.jsp 文件中的内容:再次运行:如果需要选择很久以前的日期或者以后的日期,很显然上面的方式就不是很方便了,我们需要提供可以选择的年和月:在datepicker.jsp 文件中添加如下代码:面的是在非IE中的运行结果,如果在IE中效果就不是那样了:为此,需要对样式进行修正。

只需要自己再定义一个样式,覆盖掉原来的样式即可,所以新建一个样式文件pack_datepicker.css内容如下:然后引入css 文件:修正后的效果:4. 对话框点击按钮的时候,弹出对话框。

新建一个jsp 页面, dialog.jsp点击一个连接,打开一个对话框modal =”true” 表示该对话框是一个模态窗口cssClass :中写了三个样式:buttonlink 是自定义的样式,ui-state-default ui-corner-all是jQuery UI中定义的样式,我们不用管5.表格新建table1.jsp。

在这个页面中演示如何使用表格,表格中的数据通过Ajax请求取得。

有一点要注意:Jquery UI中并没有表格,这个表格使用的是另外一个JQuery插件,名字叫jqGrid ,这个插件被一起整合到了.struts2-jquery-plugin-1.8.2.jar 中了。

5.1首先准备一个Action该Action为表格提供数据.Action中取得数据,然后将数据通过JSON格式返回给页面。

这里设计几个辅助类来完成.Student类封装学生对象PageBean类封装页面中要显示的相关数据StudentDAO类,提供PageBean对象Student类封装学生对象PageBean类封装页面中要显示的相关数据StudentDAO类,提供PageBean对象TableAction类,为页面提供数据5.2对Action进行部署,struts-jquery.xml文件table1.jsp文件我们发现出现了一些问题。

我们前面使用:locale=”zh-CN” 导入了 中文国际化js 文件,我们可以看看生成的源代码:再看看 struts2-jquery-plugin-1.8.2.jar 中有关国际化的js 文件:我们看到根本没有 grid.locale-zh-CN.js 文件,而ui.datepicker-zh-CN.js 文件是有的,这是 struts2-jquery-plugin-1.8.2.jar 文件本身的问题,此时就需要将jar 包中的grid.locale-cn.js 文件改名成grid.locale-zh-CN.js ,然后重新打包:再次运行:我们发现,不但字体比较难看,而且低下的文本框还隐藏了一半,这个问题同样存在于firefox 中。

这主要是因为这个文档没有在HTML 文档中加入 DOCTYPE 声明,它指定当前使用哪种规范进行验证。

所以文档的开始部分加入下面的代码:现在看起来正常了。

但是在firefox中显示的时候,字体偏小。

因为表格使用的是jar 包中的ui.jqgrid.css文件中的样式,在该样式表中有一个类样式:在table1.jsp文件的样式中添加如下代码:然后再次在firefox中运行:现在字体好看多了5.3编辑表格将table1.jsp另存为table2.jsp, 然后修改sj:grid 标签中的两个属性:navigator: true 表格底部左侧的导航,包括增加,删除,修改,查询的图标viewrecords: true 表格底部右侧的记录统计显示隐藏掉修改,删除,查询三个按钮当我们点击“+” 想添加一条记录的时候效果如下:可以看到,弹出窗口中没有输入框。

为了出现输入框,我们需要在sj:gridColumn中设置属性:如果想将性别编程下拉框,需要继续设置属性:那么当点击提交之后向服务器提交的地址是什么,又提交了什么数据呢?首先,要通过editurl设定一个提交的地址,增加,删除,修改都会发送到这个地址上。

上面的学号让自动生成,所以不用填入学号,做如下修改:那么当输入信息之后,输入数据将会被提交到EditAction上,那么提交的参数是什么呢?<sj:gridColumn > 中的name属性就是提交的参数,提交的方式是post方式。

还有一点要注意: 由于增加,删除,修改提交的url都是同一个,那么服务端如何知道是那种操作呢?它们在提交的时候,使用一个参数来加以区分,增加: oper=add删除:oper=del修改: oper=edit编写Action配置Action因为这个Action不需要使用任何视图,所以不必定义视图5.4删除操作:将table2.jsp另存为table3.jsp修改配置:效果:点击“删除”按钮之后,提交的信息是:oper=del&id=108,1095.5点击自定义按钮,进行增加操作.将table3.jsp另存为table4.jsp添加一个按钮:onClicktopics相当于是一个事件的标识,”addRow”就是标识的名字,将这个标识注册到一个函数上:$.subscribe是引入的另外一个jQuery插件库.当按钮上发生点击事件的时候,会调用注册的方法$(‘#gridtable’).jqGrid() 方法是jqGrid插件定义的方法,这个方法可以弹出窗口,至于是什么样的窗口,由参数指定和前面效果一样了。

合集下载

jquery使用方法

jquery使用方法

jquery使⽤⽅法jQuery是⽬前使⽤最⼴泛的javascript函数库。

据统计,全世界排名前100万的⽹站,有46%使⽤jQuery,远远超过其他库。

微软公司甚⾄把jQuery作为他们的官⽅库。

对于⽹页开发者来说,学会jQuery是必要的。

因为它让你了解业界最通⽤的技术,为将来学习更⾼级的库打下基础,并且确实可以很轻松地做出许多复杂的效果。

⼀、选择⽹页元素jQuery的基本设计和主要⽤法,就是"选择某个⽹页元素,然后对其进⾏某种操作"。

这是它区别于其他函数库的根本特点。

使⽤jQuery的第⼀步,往往就是将⼀个选择表达式,放进构造函数jQuery()(简写为$),然后得到被选中的元素。

选择表达式可以是CSS选择器:1 $(document)//选择整个⽂档对象2 $('#myId')//选择ID为myId的⽹页元素3 $('div.myClass')//选择class为myClass的div元素4 $('input[name=first]')//选择name属性等于first的input元素也可以是jQuery特有的表达式:1 $('a:first')//选择⽹页中第⼀个a元素2 $('tr:odd')//选择表格的奇数⾏3 $('#myForm :input')//选择表单中的input元素4 $('div:visible') //选择可见的div元素5 $('div:gt(2)')//选择所有的div元素,除了前三个6 $('div:animated')//选择当前处于动画状态的div元素⼆、改变结果集如果选中多个元素,jQuery提供过滤器,可以缩⼩结果集:1 $('div').has('p'); //选择包含p元素的div元素2 $('div').not('.myClass'); //选择class不等于myClass的div元素3 $('div').filter('.myClass'); //选择class等于myClass的div元素4 $('div').first(); //选择第1个div元素5 $('div').eq(5); //选择第6个div元素有⼀些时候,我们需要从结果集出发,移动到附近的相关元素,jQuery也提供了在DOM树上的移动⽅法:1 $('div').next('p'); //选择div元素后⾯的第⼀个p元素2 $('div').parent(); //选择div元素的⽗元素3 $('div').closest('form'); //选择离div最近的那个form⽗元素4 $('div').children(); //选择div的所有⼦元素5 $('div').siblings(); //选择div的同级元素三、链式操作选中⽹页元素以后,就可以对它进⾏某种操作。

jquery库 用法

jquery库 用法

jquery库用法
jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和AJAX操作等常见任务。

它的使用方法可以分为以
下几个方面:
1. 引入jQuery库,首先,在HTML文档中引入jQuery库文件,可以通过在<head>标签中添加<script>标签来引入外部的jQuery库
文件,也可以使用CDN链接来引入jQuery库。

2. 文档就绪函数,jQuery提供了一个文档就绪函数,即$(document).ready(),用于确保文档完全加载后再执行jQuery代码,以避免在文档加载未完成时执行操作。

3. 选择器,jQuery使用CSS选择器来选择HTML元素,可以通
过元素名称、类名、ID等方式来选择元素,然后对选中的元素进行
操作。

4. 事件处理,jQuery可以通过事件处理函数来响应用户的操作,如点击、鼠标移入移出等,可以使用.on()方法或直接使用事件
处理函数来绑定事件。

5. DOM操作,jQuery提供了丰富的DOM操作方法,如添加、删除、替换元素,修改元素的属性和内容等。

6. 动画效果,jQuery可以实现各种动画效果,如淡入淡出、滑动、动画等,通过.animate()方法或预定义的方法来实现动画效果。

7. AJAX操作,jQuery封装了AJAX操作的方法,可以通过$.ajax()方法来发送异步请求,获取服务器数据并更新页面内容。

总之,jQuery库的用法涵盖了文档操作、事件处理、动画效果和AJAX操作等多个方面,可以大大简化JavaScript代码的编写,并提高开发效率。

希望以上内容能够全面回答你对jQuery库用法的问题。

jquery+flexigrid使用方法

jquery+flexigrid使用方法

Jquery flexigrid使用使用技术:struts2.1.6+spring+hibernate+jquery+flexigrid+thickbox+mysql 主要的js文件:jquery.js,flexigrid.js,query.js,thickbox.js,util.js其中:util.js是扩展flexigrid的功能,如条件查询用到的getQuery属性。

query.js是自定义的flexigrid界面显示和函数触发文件。

Jar包:使用过程:Struts2 jar只能用 2.1.6,web.xml中配置:<taglib><taglib-uri>struts-tags</taglib-uri><taglib-location>/WEB-INF/lib/struts2-core-2.1.6.jar</taglib-loca tion></taglib>用struts2-core-2.0.14会报错:org.apache.jasper.JasperException: Unable to initialize TldLocationsCache: nullJsp页面:引入jquery、flexigrid插件文件以及test.js,body中编写:<body><table id="grid"></table></body>在js文件中使用flexigrid创建页面: $(document).ready( function() {$("#grid").flexigrid( {// url :'jsp/query/json.json',url : 'getPaginationAction.action',dataType :'json',colModel : [ {display :'编号',name :'id',width :60,sortable :true,align :'center'}, {display :'姓',name :'firstname',width :120,sortable :true,align :'left'}, {display :'名',name :'lastname',width :120,sortable :true,align :'left'}, {display :'操作',name :'opt',width :120,sortable :true,align :'left',process :operate} ],searchitems : [ {display :'id',name :'id',isdefault :true}, {display :'姓',name :'firstname',isdefault :true}, {display :'名',name :'lastname',isdefault :true} ],// 右下方工具条按钮buttons : [ {name :'Add',bclass :'add',displayname :'增加',onpress :test,separator :true}, {name :'Delete',bclass :'delete',displayname :'删除',onpress :test}, {name :'Modify',bclass :'modify',displayname :'修改',onpress :test} ],sortname :"id",sortorder :"asc",striped :true,usepager :true,resizable: true,title :'人员管理',useRp :true,total :10,rp :2,pagestat :'显示 {from} 到 {to} 条,共{total}条记录', procmsg :'加载中, 请稍等 ...',showTableToggleBtn :true,rpOptions : [ 2, 5, 10, 15, 20 ],// 可选择设定的每页结果数width :1000,height :300,getQuery :getQuery});});条件筛选查询时使用的:Form id=“search”;查询按钮的id为dosearch:<input name=""type="button"class="btn-search2"value="查询"id="dosearch"/>Flexigrid插件中getQuery属性对应页面上部“更多高级选项”处的“查询”,也是点击树形菜单“角色授权”执行过程是相同的。

struts2+json+jquery实现ajax登录和注册功能

struts2+json+jquery实现ajax登录和注册功能

在上一篇博文中已经学习了如何整合mybatis和spring,实现持久层的CRUD操作、业务层的事务管理和spring的IoC。

现在我们这个demo的基础上,继续整合struts2,并利用json插件和jquery实现ajax,完成后系统将实现登录与注册的简单功能。

浏览器端如何简单、高效地与服务器端进行数据交互是web开发者最为关心的内容。

在客户端构造intput表单数据或者拼凑URL参数名称/参数值,然后在服务器端笨拙地用request.getParameter(“参数名称”)获取参数显然已经过时了,在struts2中,只要在action 里定义了input表单名称/URL参数名称对应的String类型属性,并设置getter和setter 方法,struts2在调用action的时候就可以根据参数值自动帮你设置好action中对应的属性值供你使用,这极大地方便了开发者。

但是json更为强大——它可以根据浏览器端上传的符合格式的数据设置action中对象的值,也就是说,struts2自动封装的数据只有一层,而json是无限层。

json给页面参数的传递带来极大的方便,结合jquery来使用,可以轻易地做到页面局部刷新、页面无跳转进行友好的系统异常提示等,其中后者是我觉得最有必要做到的一点,在action中定义一个message变量,把action方法执行的结果或者系统异常信息放到里面以json的方式返回给客户端,客户端根据这个变量的结果来进行下一步的操作或者提示系统异常信息,非常地好用。

json由javascript中的对象和数组构成,基本形式是{key:value},key为属性名称,value 为属性值,value可以为数字、字符串、数组、对象,value可以为数组和对象是json可以封装无限层数据的关键所在。

至于如何建构和解析json不是本篇博文的详细表述范围,请参考其他资料。

现在就让我们利用struts2作为MVC框架,整合json插件,在浏览器端使用jquery解析和系列化json数据,由此制作一个具有登陆/注册功能的小demo。

struts2-convention-plugin_注解使用说明_概述及解释说明

struts2-convention-plugin_注解使用说明_概述及解释说明

struts2-convention-plugin 注解使用说明概述及解释说明1. 引言1.1 概述在现代的Web开发中,Struts2作为一个成熟稳定的Java Web框架,在业界得到广泛应用和认可。

而struts2-convention-plugin则是Struts2框架中一个重要的插件,它通过引入注解的方式来简化配置文件,并提供了一种更便捷、高效的开发方式。

1.2 文章结构本文将详细介绍struts2-convention-plugin的注解使用说明,并以概述、注解说明、使用示例等部分来逐步讲解。

接着,我们将对其进行解释说明,包括与传统struts.xml配置方式的比较、使用时需要注意的事项以及实际应用案例。

最后,我们将总结文章要点并给出对于注解方式的评价和展望。

1.3 目的本文旨在帮助读者更好地理解和掌握struts2-convention-plugin插件中注解的使用方法。

通过本文介绍和示例演示,读者将能够快速上手并灵活运用该插件,从而提高开发效率和代码质量。

以上是“1. 引言”部分内容,请根据需要进行修改和补充。

2. struts2-convention-plugin 注解使用说明:2.1 概述:struts2-convention-plugin 是Struts2 框架中的一个插件,它提供了一种基于注解的方式来配置和管理Action 类。

通过使用这个插件,我们可以简化传统的XML 配置文件,并且能够更加便捷地进行开发。

2.2 注解说明:struts2-convention-plugin 提供了一系列的注解,用于配置和定义Action 类及其相关属性和方法。

以下是常用的几个注解:- @Action:用于标识一个方法作为Action 的入口方法,可以指定URL 映射及HTTP 请求类型。

- @Result:用于指定一个结果视图,可以定义对应的视图页面、重定向操作等。

- @Param:用于将请求参数绑定到Action 类的属性上。

JavaScript的插件使用

JavaScript的插件使用

JavaScript的插件使用在网页开发中,JavaScript是一种广泛使用的脚本语言,因为它能够为网页添加各种交互功能和动态效果。

而要实现更复杂的功能,我们通常会使用JavaScript插件。

本文将介绍JavaScript插件的使用方法,帮助读者更好地应用插件来增强网页的功能和效果。

一、插件简介JavaScript插件是一段能够被网页调用的JavaScript代码,它可以被其他开发者编写并分享。

插件的目的是为了让开发者能够复用已有的代码,避免从零开始编写一些常见的功能。

二、插件的安装和应用1. 下载插件文件首先,我们需要从可靠的资源网站或开发者的官方网站下载所需的插件文件。

通常,插件的下载页面会提供相应的安装说明和示例代码。

2. 引入插件一般情况下,我们需要在HTML文件的头部使用`<script>`标签来引入插件文件。

例如,如果要使用名为"example.js"的插件,可以在HTML文件中添加如下代码:```html<script src="example.js"></script>```3. 调用插件在插件文件被加载后,我们可以通过调用插件中的函数或使用插件提供的API来实现想要的功能。

插件的使用方法通常会在官方文档中有详细说明。

三、常见的JavaScript插件1. jQueryjQuery是一个流行的JavaScript库,它简化了JavaScript开发的许多任务。

通过使用jQuery,我们可以轻松地实现诸如动画效果、表单验证、AJAX等功能。

2. Chart.jsChart.js是一个用于创建漂亮的图表和数据可视化的JavaScript库。

它支持多种图表类型,如折线图、饼图、柱状图等,可以帮助我们更好地展示数据。

3. SwiperSwiper是一个强大的移动端触摸滑动插件,适用于创建响应式的幻灯片和滑动效果。

select2的用法

select2的用法摘要:1.Select2 简介2.Select2 的基本用法3.Select2 的选项配置4.Select2 的样式定制5.Select2 的示例代码正文:【1.Select2 简介】Select2 是一个基于jQuery 的下拉列表选择插件,为用户提供了一个美观且实用的选择器。

Select2 可以轻松地与现有的HTML 表单元素集成,并提供了丰富的配置选项,使得用户可以根据需求进行定制。

【2.Select2 的基本用法】要使用Select2,首先需要引入Select2 的CSS 和JavaScript 文件。

然后,通过以下步骤为HTML 中的<select>元素添加Select2 插件:1.为<select>元素添加一个独特的ID。

2.在<select>元素上添加data-select2 属性。

3.将Select2 的CSS 文件引入到HTML 文件中。

4.将Select2 的JavaScript 文件引入到HTML 文件中。

例如:```html<select id="mySelect" data-select2></select><link rel="stylesheet" href="path/to/select2.min.css"><script src="path/to/select2.min.js"></script>```【3.Select2 的选项配置】Select2 提供了丰富的配置选项,可以通过JavaScriptAPI 进行设置。

以下是一些常用的配置选项:1.`placeholder`:指定提示文本。

2.`allowClear`:是否允许用户清空选择器。

3.`multiple`:是否允许多选。

Struts2详细实例教程

Struts2(上)一、经典的MVC模式二、Struts1.x对MVC的实现三、Struts1.x的主要组件和作用组件作用ActionServlet 中央控制器Action 分控制器,调用JavaBean实现业务逻辑,Action可以分为Action、DispatchAction等不同类型ActionForm 封装参数,实现服务器验证,文件上传等Forward 转发到目的地,可以是JSP,也可以是另一个ActionStruts-config.xml 配置文件,配置有ActionForm,Action,Forward等,通过XML解析,然后使用反射技术使用该文件Struts标签库和JSTL类似,和Struts-config.xml、ActionForm、Action等对象可以紧密集成四、Struts1.x 开发实例-登录程序见案例。

五、Struts2(WebWork)的MVCStruts2的MVC架构六、Struts2的主要组件组件作用FilterDispatcher 起中央控制器作用的过滤器Action 处于Model层的Action,调用JavaBean实现业务逻辑struts.xml 核心配置文件,配置有Action、Result等result 和forward类似,转发的目的地,支持多种视图技术。

七、Struts2的实例-登录在MyEclipse环境中建立一个新的web工程,名称“Struts2Login”,存放路径“f:\Struts2Login”。

在Struts2.0.11版本中找到war包struts2-blank-2.0.11.war,解开该war包,在WEB-INF/lib 目录下复制出所有的jar包,这些jar包就是一个Struts2程序所需要的基础jar包,把它们复制到新建的web工程的WEB-INF/lib目录中。

在src目录下建立一个类,包名mypack,类名UserAction,其代码如下:package mypack;import com.opensymphony.xwork2.ActionSupport;public class UserAction extends ActionSupport {private String username;private String userpass;public String getUsername() {return username;}public void setUsername(String username) {ername = username;}public String getUserpass() {return userpass;}public void setUserpass(String userpass) {erpass = userpass;}@Overridepublic String execute() throws Exception {if ("Mike".equals(username) && "123".equals(userpass)|| "张三".equals(username) && "abc".equals(userpass))return "success";elsereturn "error";}}在src目录下建立Struts2的配置文件struts.xml,内容如下:<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN""/dtds/struts-2.0.dtd"><struts><!-- 定义包管理配置的action 继承struts-default.xml中的配置 --><package name="actions" extends="struts-default"><!-- 定义Action(login.action) --><action name="login" class="erAction"><!-- 定义转发路径对应的字符串名 --><result name="success">/Success.jsp</result><result name="error">/Error.jsp</result></action></package></struts>修改web.xml,在其中加入一个过滤器,过滤/*路径。

struts2_超链接与action使用

Struts2 超链接和 action 使用Struts2.0 链接标签Web 应用区别于普通的站点之处在于Web 应用可以创建一个动态的响应。

为了使从一个页面中链接一个动态数据变得简单,Struts2 框架提供了一系列的标签。

Struts 标签的一种用法是创建链接到其他 Web 资源,特别是针对那些在本地应用中的资源。

1.普通链接Web 程序中最普通的应用是链接到其他页面,下面看 Welcome.jsp。

<%@ page contentType="text/html; charset=UTF-8" %> <%@ taglib prefix="s" uri="/struts-tags" %><html><head><title>Welcome</title><link href="<s:url value="/css/tutorial.css"/>" rel="stylesheet"type="text/css"/></head><body><h3>Commands</h3><ul><li><a href="<s:url action="Login_input"/>">Sign On</a></li><li><a href="<s:url action="Register"/>">Register</a></li></ul></body></html>1.1 说明1.<%@ taglib prefix="s" uri="/struts -tags" %>此句表示导入 struts 标签,并以 s 为前缀。

Struts2-Json-Plugin 的使用

Struts2-Json-Plugin 的使用在Struts2 中要使用Ajax 获得Json 数据我认为目前还是struts2-json-plugin 了。

当然你你可以用手工用像XStream、Google Gson、Jackson 这样的工具手工把Java 对象转换成Json 字符串再写往Response 去,要写的代码自然多不了,还得留心字符集与content type。

而struts2-json-plugin 毫无疑问是与Struts2 最亲近了,只需你配置一些属性就能得到你想的结果。

本想分几篇逐步介绍如何使用struts2-json-plugin 的,然而就在现在发现官方的struts2-json-plugin 指南已经很详细了,所以干脆翻译一下/2.2.1.1/docs/json-plugin.html,同时自己加深对它的理解。

JSON 插件提供了一个"json" 结果类型来把action 序列化成JSON. 这一序列化的过程是递归的, 意即整个对象图,从action 类开始(未包括基类) 将会被序列化(可以用"root" 属性来指定自己的根对象). 如果使用了json 拦截器, action 将可通过请求中的JSON 内容组装出来, 该拦截器遵循以下几条规则:"content-type" 必须为"application/json"JSON 内容必须是格式良好的, 参考 中的语法.Action 里必须有欲获取值的属性的相应public 的"setter" 方法.所支持的类型有: 原始类型(int,long...String), Date, List, Map, 原始类型数组, 其他的类(将会支持更多), 和其他类型的数组.JSON 中的任何将要被填入到list 或map 中的对象会是Map 类型(属性映射到值), 任何整数都是Long 类型, 任何小数会是Double 类型, 任何数组会是List 类型.给定下面的JSON 字符串:{"doubleValue": 10.10,"nestedBean": {"name": "Mr Bean"},"list": ["A", 10, 20.20, {"firstName": "El Zorro"}],"array": [10, 20]}action 中必须有一个"setDoubleValue" 方法, 参数为"float" 或者"double"(拦截器将会把值转换为相应的类型). 还必须有一个"setNestedBean" 方法,它的参数类型可以为任何类类型, 其中含有参数为"String" 的"setName" 方法. 还必须有一个参数为"List" 的"setList" 方法, 这个List 中将会包含: "A" (String), 10 (Long), 20.20 (Double), Map ("firstName" -> "El Zorro"). "setArray" 方法可以是"List", 或任何数字类型数组作参数的.序列化你的对象成javascript 的JSON, 参考json2安装本插件可通过把插件jar 包到你的应用的/WEB-INF/lib 目录来完成安装. 没有别的文件需要拷贝或被创建.使用maven 的话, 加入下列到你的pom 中:<dependencies>...<dependency><groupId>org.apache.struts</groupId><artifactId>struts2-json-plugin</artifactId><version>STRUTS_VERSION</version></dependency>...</dependencies>定制化序列化和反序列化使用JSON 注解来达到定制序列化和反序列化过程. 可用的JSON 注解如下:名称描述默认值序列化反序列化name 定制字段名empty yes noserialize 标识为可被序列化true yes nodeserialize 标识为可被反序列化true no yesformat 用于格式化或解析Date 字段的格式"yyyy-MM-dd'T'HH:mm:ss" yes yes排除属性逗号分隔的正则表达式列表可传递给JSON Result 和Interceptor(拦截器), 被任何一个正则表达式匹配的属性将会在序列化过程时忽略掉:<!-- Result fragment --><result type="json"><param name="excludeProperties">login.password,studentList.*\.sin</param></result><!-- Interceptor fragment --><interceptor-ref name="json"><param name="enableSMD">true</param><param name="excludeProperties">login.password,studentList.*\.sin</param></interceptor-ref>包含属性逗号分隔的正则表达式列表可被传递给JSON Result, 用于限制哪些属性可用于序列化. 只有当能够匹配任何一个正则表达式的属性才会包含在序列化输出中.排除属性表达式优先于包含属性的表达式. 那就是说, 如果包含和排除表达式应用于同一个结果, 包含表达式对于被排除表达式匹配到的属性是不起作用的.<!-- Result fragment --><result type="json"><param name="includeProperties">^entries\[\d+\]\.clientNumber,^entries\[\d+\]\.scheduleNumber,^entries\[\d+\]\.createUserId</param></result>根对象使用"root" 属性(OGNL 表达式) 指定被用于序列化的根对象.<result type="json"><param name="root">person.job</param></result>"root" 属性(OGNL 表达式) 也可以用于拦截器来指定被组装的对象, 确保这个对象不会是null.<interceptor-ref name="json"><param name="root">bean1.bean2</param></interceptor-ref>包装可能会有某些原因,你想要用些文本对JSON 输出包装一下, 像用注释包裹, 加上前缀, 或使用文件上载让结果显示在textarea 之中. 用wrapPrefix 在开始处加上内容,wrapPostfix 添加内容在尾端. 这两个参数优先使用,而"wrapWithComments" 和"prefix" 自从0.34 后就不推荐使用. 例子:进行注释:<result type="json"><param name="wrapPrefix">/*</param><param name="wrapSuffix">*/</param></result>添加前缀:<result type="json"><param name="wrapPrefix">{}&&</param></result>包裹上传的文件内容:<result type="json"><param name="wrapPrefix"><![CDATA[<html><body><textarea>]]></param><param name="wrapSuffix"><![CDATA[</textarea></body></html>]]></param></result>wrapWithComments 自0.34 不推荐使用, 建议用wrapPrefix 和wrapSuffix.wrapWithComments 可使得安全的JSON 文本变得不安全. 例如,["*/ alert('XSS'); /*"]谢谢Douglas Crockford 的提示! 应考虑用prefix.假如被序列化的JSON 是{name: 'El Zorro'}. 那么此时输出就会是: {}&& ({name: 'El Zorro'}假如"wrapWithComments" (默认为false) 属性被设为true, 生成的被包裹上注释的JSON 就如下:/* {"doubleVal": 10.10,"nestedBean": {"name": "Mr Bean"},"list": ["A", 10, 20.20, {"firstName": "El Zorro"}],"array": [10, 20]} */欲取消上面的注释,可用:var responseObject = eval("("+data.substring(data.indexOf("\/\*")+2, stIndexOf("\*\/"))+")");前缀prefix 从0.34 后不建议用, 请用wrapPrefix 和wrapSuffix.假如参数prefix 被设置为true, 生成的JSON 将被附上前缀"{}&& ". 这有助于防止被劫持. 详细内容请看this Dojo Ticket:<result type="json"><param name="prefix">true</param></result>基类默认时,定义在"root" 对象的基类中的属性不会被序列化, 要序列化来自于所有基类(直到Object) 中的属性,需在JSON result 里设置"ignoreHierarchy" 为false:<result type="json"><param name="ignoreHierarchy">false</param></result>枚举类型默认的, Enum 被序列化为name=value 对,这里的value = name().public enum AnEnum {ValueA,ValueB}JSON: "myEnum":"ValueA"使用result 的参数"enumAsBean" 可使得Enum 像一个bean 一样的被序列化,特定的属性为_name,值为name(). 所有的枚举属性都会被序列化.public enum AnEnum {ValueA("A"),ValueB("B");private String val;public AnEnum(val) { this.val = val; } public getVal() {return val;}}JSON: myEnum: { "_name": "ValueA", "val": "A" }在struts.xml 中启用该参数:<result type="json"><param name="enumAsBean">true</param></result>压缩输出.设置enableGZIP 属性为true 可用gzip 压缩响应输出. 在请求后"Accept-Encoding" 头中必须包含"gzip" 才能正常工作.<result type="json"><param name="enableGZIP">true</param></result>防止浏览器缓存响应数据noCache 设置为true(默认为false) 会设置如下响应头:Cache-Control: no-cacheExpires: 0Pragma: No-cache<result type="json"><param name="noCache">true</param></result>排除值为null 的属性默认的,为null 的字段也被序列化,生成像{property_name: null}. 这能够通过设置excludeNullProperties 为true 来防止.<result type="json"><param name="excludeNullProperties">true</param></result>状态和错误代码使用statusCode 来设置响应状态代码:<result type="json"><param name="statusCode">304</param></result>同时可用errorCode 来发送一个错误(the server might end up sending something to the client which is not the serialized JSON):<result type="json"><param name="errorCode">404</param></result>JSONPTo enable JSONP, set the parameter callbackParameter in either the JSON Result or the Interceptor. A parameter with that name will be read from the request, and it value will be used as the JSONP function. Assuming that a request is made with the parameter "callback"="exec":<result type="json"><param name="callbackParameter">callback</param></result>And that the serialized JSON is {name: 'El Zorro'}. Then the output will be: exec({name: 'El Zorro'})Content TypeContent type will be set to application/json-rpc by default if SMD is being used, or application/json otherwise. Sometimes it is necessary to set the content type to something else, like when uploading files with Dojo and YUI. Use the contentType parameter in those cases.<result type="json"><param name="contentType">text/html</param></result>ExampleSetup ActionThis simple action has some fields:Example:import java.util.HashMap;import java.util.Map;import com.opensymphony.xwork2.Action;public class JSONExample {private String field1 = "str";private int[] ints = {10, 20};private Map map = new HashMap();private String customName = "custom";//'transient' fields are not serializedprivate transient String field2;//fields without getter method are not serializedprivate String field3;public String execute() {map.put("John", "Galt");return Action.SUCCESS;}public String getField1() {return field1;}public void setField1(String field1) {this.field1 = field1;}public int[] getInts() {return ints;}public void setInts(int[] ints) {this.ints = ints;}public Map getMap() {return map;}public void setMap(Map map) {this.map = map;}@JSON(name="newName")public String getCustomName() {return this.customName;}}Write the mapping for the actionAdd the map inside a package that extends "json-default"Add a result of type "json"Example:<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE struts PUBLIC"-//Apache Software Foundation//DTD Struts Configuration 2.0//EN""/dtds/struts-2.0.dtd"><struts><package name="example" extends="json-default"><action name="JSONExample"><result type="json"/></action></package></struts>JSON example output{"field1" : "str","ints": [10, 20],"map": {"John":"Galt"},"newName": "custom"}JSON RPCThe json plugin can be used to execute action methods from JavaScript and return the output. This feature was developed with Dojo in mind, so it uses Simple Method Definition to advertise the remote service. Let's work it out with an example(useless as most examples).First write the action:package smd;import com.googlecode.jsonplugin.annotations.SMDMethod;import com.opensymphony.xwork2.Action;public class SMDAction {public String smd() {return Action.SUCCESS;}@SMDMethodpublic Bean doSomething(Bean bean, int quantity) {bean.setPrice(quantity * 10);return bean;}}Methods that will be called remotely must be annotated with the SMDMethod annotation, for security reasons. The method will take a bean object, modify its price and return it. The action can be annotated with the SMD annotation to customize the generated SMD (more on that soon), and parameters can be annotated with thodParameter. As you can see, we have a "dummy", smd method. This method will be used to generate the Simple Method Definition (a definition of all the services provided by this class), using the "json" result.The bean class:package smd;public class Bean {private String type;private int price;public String getType() {return type;}public void setType(String type) {this.type = type;}public int getPrice() {return price;}public void setPrice(int price) {this.price = price;}}The mapping:<package name="RPC" namespace="/nodecorate" extends="json-default"><action name="SMDAction" method="smd"><interceptor-ref name="json"><param name="enableSMD">true</param></interceptor-ref><result type="json"><param name="enableSMD">true</param></result></action></package>Nothing special here, except that both the interceptor and the result must be applied to the action, and "enableSMD" must be enabled for both.Now the javascript code:<s:url id="smdUrl" namespace="/nodecorate" action="SMDAction" /><script type="text/javascript">//load dojo RPCdojo.require("dojo.rpc.*");//create service object(proxy) using SMD (generated by the json result)var service = new dojo.rpc.JsonService("${smdUrl}");//function called when remote method returnsvar callback = function(bean) {alert("Price for " + bean.type + " is " + bean.price);};//parametervar bean = {type: "Mocca"};//execute remote methodvar defered = service.doSomething(bean, 5);//attach callback to defered objectdefered.addCallback(callback);</script>Dojo's JsonService will make a request to the action to load the SMD, which will return a JSON object with the definition of the available remote methods, using that information Dojo creates a "proxy" for those methods. Because of the hronous nature of the request, when the method is executed, a deferred object is returned, to which a callback function can be attached. The callback function will receive as a parameter the object returned from your action. That's it.Proxied objectsAs annotations are not inherited in Java, some user might experience problems while trying to serialize objects that are proxied. eg. when you have attached AOP interceptors to your action.In this situation, the plugin will not detect the annotations on methods in your action.To overcome this, set the "ignoreInterfaces" result parameter to false (true by default) to request that the plugin inspects all interfaces and superclasses of the action for annotations on the action's methods.NOTE: This parameter should only be set to false if your action could be a proxy as there is a performance cost caused by recursion through the interfaces.<action name="contact" method="smd"><interceptor-ref name="json"><param name="enableSMD">true</param><param name="ignoreSMDMethodInterfaces">false</param></interceptor-ref><result type="json"><param name="enableSMD">true</param><param name="ignoreInterfaces">false</param> </result><interceptor-ref name="default"/></action>。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
相关文档
最新文档