`
ZhouGang库鲁卡
  • 浏览: 28625 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

转STRUTS2整合JQUERY开发WEB程序

 
阅读更多

【转】STRUTS2整合JQUERY开发WEB程序

Struts2可以和JQuery 完美结合.

我假定你已经在你的项目中选择了Struts2,你的项目中会有一些表单需要作前端验证, 比如登录表单, 注册表单等等, 甚至, 你还想加一些Ajax进去, 这一切, Struts2和它的JQuery 插件可以帮你搞定.

OK, 在讲这些之前, 可以先看看Jquery 插件的 Show case, 以印证我之前提到的所谓的完美. 
http://www.weinfreund.de/struts2-jquery-showcase/index.action接下来我分几个步骤一步步讲如何将Struts2 与JQuery 两者整合.

第一步:引入Struts2-Jquery 插件               如果你的项目是基于Maven开发, 则在你的pom.xml里面加入

<dependency>  
    <groupId>com.jgeppert.struts2.jquery</groupId>  
    <artifactId>struts2-jquery-plugin</artifactId>  
    <version>2.0.0</version>  
</dependency>

第二步：在表单中使用Jquery 组件画一个日期控件

要用JQuery 画 UI控件， 就要在jsp 页面中引入Jquery 相关的的JS文件, 使和Struts2-Jquery 插件会使这一步变得很简单。

1.在jsp页面引入 struts2 Jquery 标签， 如下：

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>

2.在<head></head> 之间加入Jquery头标签, 实际上这个标签的作用就是帮你引入Jquery 的相关js 文件， 同时， 初始化一些配置信息：

<sj:head locale=’en’ jqueryui="true"/>

3. 在表单里面放入你想放的日期控件， 并打开网页查看效果。

<sj:datepicker id="date0" label="Select a Date" />

第三步:中文

我相信你在完成第二步的时候已经开始查看你的页面效果了， 你是不是看到了一个日期控件？ 可惜它是英文的， 如果你不是在做外包， 估计你还得往下看。

在第二步时， 我在<head></head> 之间加入Jquery头标签已经定义了接下来展示的控件是英文的。

<sj:head locale=’en’ jqueryui="true"/> 中的 locale=’en’ 就表示要使用英文展示控件内容， 将它变成 locale=’zh_CN’ 使表示要展示的是简体中文内容的控件啦。

可是,别急..你得注意一下你的网页字符格式,它是UTF-8吗?如果是,恭喜你完工了,打开网页你就可以看到一个中文化的日期控件。

可是现实很残酷,在中国的软件公司做中国的项目， 数据库里存的尽是GB2312, 说是为了节省空间， 好像这年头最贵的不是程序员工资而是服务器硬盘。 网页打开的格式也基本要求是GB2312或GBK。

这给Java程序员引入开源带来不少麻烦， 因为老外它就认UTF-8, 在Struts2-JQuery 插件里面存的js格式也是UTF-8的。

在GBK格式的网页里面一引入带中文字符的UTF-8格式的js文件就会出js错误。

办法：
在Struts2-Jquery 插件里面有两个带中文字符的js文件,分别是 template/i18/grid.locale-zh-CN.js 和 template\i18n\jquery.ui.datepicker-zh-CN.min.js 把它们拉出来， 改为GB2312的。 存到class目录的 template/i18n 目录下。 根据class加载顺序， 应当会将class目录下的两个文件载入 struts2-Jquery.jar 目录中的两个js文件会被忽略。

好了,GBK格式的网页的麻烦也没有啦…

 

第四步：表单验证

 

服务器当然也可以完成验证工作， 而表单客户端验证其实是变相的把一部分计算让客户端来承担。

 

打开以下链接， 可以看到Jquery validation 的 Demo

 

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

 

JQuery 的验证框架整合到 Struts2 中非常easy.

 

如下：

 

在JSP的head 中引入 javascript 文件。

 

http://IP/app/js/jquery.validate.min.js

 

另加一段Javacript

 

<script>  

$(document).ready(function(){ 

 

  $("#formId").validate(); 

 

}); 

 

</script>

 

假设你的表单项如下：

 

<form id="formId">  

  <input type="text" name="username" />  

  <input type="submit" value="提交" />  

</form>

这样就说明,你的验证框架已经和 fromId 这个表单建立了关联, 假设你想把表单项 username  设置为必填项， username 表单项改为如下:

 

<input type="text" name="username" class="required"/>

 

好了这时候,你点击提交按钮的时候便会提示 usrename is required.

 

第五步:Ajax 提交

 

struts-jquery 插件提供了ajax 的表单提交按钮.

 

<s:form id="form" action="echo" theme="simple" cssClass="yform">  

        <fieldset>  

            <legend>AJAX Form</legend>  

            <div class="type-text">  

                <label for="echo">Echo: </label>  

                <s:textfield id="echo" name="echo" value="Hello World!!!"/>  

            </div>  

            <div class="type-button">  

                <sj:submit targets="formResult" value="AJAX Submit" />             </div>  

        </fieldset>  

    </s:form>  

<div id="formResult"></div>

以上的代码表示提交到服务器之后， 服务器返回的内容将展示到id为formResult的div上。

 

 

 

分享到：
| (转)Struts 2的基石——拦截器（Intercep ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics