文档章节

Struts2 整合jQuery实现Ajax功能

孙斐
 孙斐
发布于 2011/10/12 16:24
字数 1375
阅读 9149
收藏 5

Struts2 整合jQuery实现Ajax功能

技术领域很多东西流行,自然有流行的道理,这几天用了jQuery,深感有些人真是聪明绝顶,能将那么多技术融合的如此完美。

首先明确个概念:

jQuery是什么:是使用javascript语言开发的,用于满足项目前台各种操作需要的js程序文件。也就是说,jQuery基本上就是个js程序集,基础核心是jQuery.js文件

l  当然根据不同的版本具体的表现形式:

jQuery.1.6.js或者jquery-1.5.1.js

这个是版本号的不同,具体有哪些区别,还没发现。

l  还有这种形式

jquery-1.5.1.min.js(紧缩格式,取消回车,一行代码)

l  根据应用需求的不同,jQuery

1           引入jQuery

项目中引入jQuery

l  下载jQueryhttp://docs.jquery.com/Downloading_jQuery

l  添加核心文件:将核心的jQuery文件复制到项目中。

        <SCRIPT type="text/javascript" src="js/jquery/jquery-1.6.js"></script>

        <SCRIPT type="text/javascript">

            function checkkey()

            {   

                            …………使用jQuery技术自定义的代码…………

            }

        </SCRIPT>

 

2           jQueryAjax

jQuery的内容非常庞杂,可以解决诸多方面的需求,主要包括:Ajax,页面效果,页面验证。

作为J2ee项目,我主要关注了一下Ajax和页面验证。

jQueryAjax很简单,仅仅使用核心文件jQuery.js就可以实现了。对于这个方面的应用,如下网站的介绍最浅显,最直接:http://www.w3school.com.cn/jquery/ w3c够权威吗?呵呵。

函数

描述

jQuery.ajax()

执行异步 HTTP (Ajax) 请求。

jQuery.get()

使用 HTTP GET 请求从服务器加载数据。

jQuery.getJSON()

使用 HTTP GET 请求从服务器加载 JSON 编码数据。

jQuery.post()

使用 HTTP POST 请求从服务器加载数据。

有关Ajax的方法有很多,这里只简单研究了三种(其实就一种jQuery.ajax()),其它的都是jQuery.ajax()的简写形式。

具体格式,上述网站说的已经非常清楚了,记住如下格式就可以。

$.ajax({

  type: 'POST',         //提交方法

  url: url,                            //提交的地址

  data: data,                 //提交的参数

  success: success,         //成功后,回调的函数名

  dataType: dataType     //返回的数据类型

});

示例:

post的示例:使用ajax()的简化格式post()方法:中间有三个参数:urldatajson格式),回调函数(回调函数可以定义在他处,此处仅写函数名

$.post("test.jsp",

{ name: "John", time: "2pm" },

     function(data){

          alert("Data Loaded: " + data);

   });

3           Struts2整合jQuery

Struts2中主要的业务操作都是通过Action来完成的,此时就需要jQuery来访问Struts2Action

$.post("Action", ……)

3.1          Login.jsp页面:

 

l  功能:用户登录,首先需要输入公司标识码:

l  正确:显示对勾;

l  错误:显示红叉;

l  jQuery代码:

        <SCRIPT type="text/javascript" src="js/jquery/jquery-1.6.js"></script>

        <SCRIPT type="text/javascript">

            function checkkey(){   

                var url = 'getKeyExist';

                var params = {companyKey:$('#ckey').attr('value')};

                 $('#warn').html("<img src='image/ajax/wait.gif'/>");

                jQuery.post(url, params, callbackFun);

            }

            function callbackFun(data){

                $('#warn').html(data);

            }

        </SCRIPT>

l  HTML:当文本框失去焦点时,触发回调事件。

<DIV class=line><LABEL class=big id=lblName>公司标识</LABEL>

<INPUT id='ckey' name="ckey" onblur="checkkey();"><span id="warn"></span>

 </DIV>

l  说明:

n  当文本框‘ckey’失去焦点时:调用“checkkey”函数;

n  checkkey”函数分别确定两个信息:

u  异步访问:'getKeyExist'——判断标识是否正确的Action类。

u  参数:{companyKey:$('#ckey').attr('value')}一个以json格式拼写的参数。

u  注:Json的对象格式:

 

 

 

 

 

 


u  发出异步请求:jQuery.post(url, params, callbackFun);

 

3.2          Action代码:

传统的Action都是返回String,根据String的不同决定forward到不同的Jsp页面,这给Ajax带来麻烦。我当初还是走了些弯路。

 

3.2.1    通过Jsp得到回调信息

就是说:

 

Login.jsp

jQuery.post( )

Action

message.jsp

 

 

 

 

 

 

 

 

 

 

 


l  Action:

       private String companyKey;

       private String remessage;

       @Override

       public String execute() throws Exception {

              String remessage="";

              List<Company> complist=companydao.findByCompanyKey(companyKey);

              if(complist.size()>0)

                     remessage="<img src=’image/ajax/yes.gif’/> ";

              else

                     remessage="<img src=’image/ajax/no.gif’ /> ";               

              return SUCCESS;

}

       public final void setCompanyKey(String companyKey) {

              this.companyKey = companyKey;

       }

       public final String getRemessage() {

              return remessage;

       }

 

l  Struts.xml

              <action name=" getKeyExist " class="ResponseMessageAction" >

                     <result name="success">/ajax/message.jsp</result>

              </action>

l  message.jsp:为了保证取得响应信息,jsp文件中只有Jsp指令

<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>

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

String path = request.getContextPath();

String basePath =

request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>

<s:property value=" remessage " />

l  问题:

n  繁琐;

n  上述的方法,在获得响应的信息时,由于是通过一个jsp页面取得,虽然jsp页面中仅有jsp指令,但是结果仍然会有很多空行,影响取得信息。

 

3.2.2    Action自主完成响应:

后来发现,Action也可以自主完成响应,不需要Jsp的支持。代码修改如下:

l  Action:新建了个方法getKeyExist,不提供返回值。

              if(complist.size()>0)

                     remessage="<img src=’image/ajax/yes.gif’/> ";

              else

                     remessage="<img src=’image/ajax/no.gif’ /> ";               

              HttpServletResponse response = ServletActionContext.getResponse();

        response.setCharacterEncoding("UTF-8");     

        response.getWriter().write(remessage);    

l  struts.xml:重新建立了无结果result

       <action name="getKeyExist" class="ResponseMessageAction" method="getKeyExist">

       </action>

l  此时得到的响应就简单干净了很多。

 

3.2.3    Action响应Json格式信息:

上述方法已经可以得到响应的信息,但是在很多情况下,还需要对响应的结果进行区分,来决定不同的显示效果,此时,响应值就要携带更多的信息,也就是说不是简单的一个字符串,而是一个对象。那么使用Json格式相对来说就比较方便(3.1提到了Json的对象格式)。

 

l  Action:响应信息改为json格式;

              if(complist.size()>0){

                     remessage="{type:'yes',show:'<img src=\"image/ajax/yes.gif\" />'}";

              }

              else{

                     remessage="{type:'no',show:'<img src=\"image/ajax/no.gif\" />'}";                                 }

 

l  jQuery:回调结果

            function callbackFun(data){

                  eval('json=' + data + ';');

                  if(json.type=='no'){

                         $('#ckey').focus();

                  }    

                $('#warn').html(json.show);

            }

 

 

 

 

 

本文转载自:http://wenku.baidu.com/view/d5c066f6f61fb7360b4c650f.html

共有 人打赏支持
孙斐
粉丝 10
博文 25
码字总数 6421
作品 0
哈尔滨
程序员
私信 提问
加载中

评论(2)

超级VIP
超级VIP
写点有用的行不??不知所云
有根竹子
有根竹子
谢谢提过信息。
Struts2 jQuery Plugin 3.0 的新特性

Struts2 jQuery Plugin 是一个 Struts2 的插件,用来提供 Ajax 功能和基于 jQuery 的 UI部件。最新发布的 3.0 版本包含很多新特性和改进哦。 主要有: 全新的树状列表标签 基于 jQuery jsTre...

红薯
2011/05/09
5K
7
迫切需要一份JAVA开发的工作,求收留。

帮朋友发求职,求一份JAVA开发的工作,薪水不是问题。只要能活着,需要一个 锻炼的机会,电话:15807563277 邮件:John_liang.coward@163.com 个人技能 1. 熟悉Linux系统环境,熟练使用常用...

XiaoCon
2014/03/01
630
7
DWZ 和 zTree 如何可以实现ajax

夜里挑战自我。 今天我想把DWZ和zTree整合在一起。昨天我已经实现了用单纯的zTree实现了加载ajax的功能。所以今夜打算把zTree糅合在DWZ中。但是发现居然没法更新,尽管按照大牛的方法debug,...

McArthur
2013/01/06
1K
5
SpringSide 3.1.2 低调发布

3.1.2是连跳了3.1.0和3.1.1两个版本后的GA版本,一边忙着Mini-Example这一亩三分地的升级,一边开始Showcase的演示...... 3.1.2版主要变更 Struts2:升级Struts 2.1.6 ,使用Convention Plug...

红薯
2009/03/17
487
0
20+ 个很棒的 jQuery 文件上传插件或教程

文件上传是网站很常见的功能之一,通过使用 jQuery 可以让上传过程更加人性化,更好的用户体验。本文介绍20个jQuery的文件上传插件,其中有一些是教程。 1. Plupload Plupload 是一个Web浏览...

红薯
2011/08/03
50.5K
9

没有更多内容

加载失败,请刷新页面

加载更多

Hibernate SQLite方言

以下代码有参考过github上国外某位大佬的,在发文的最新稳定版Hibernate上是可用的,有时间再仔细分析一下 import org.hibernate.dialect.Dialect;import org.hibernate.dialect.function.S...

CHONGCHEN
29分钟前
1
0
CentOS 7 MariaDB搭建主从服务器

本文编写环境为CentOS7。确保关闭SELinux,关闭防火墙或者防打开指定端口。具体信息如下 #master[root@promote ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) [r...

白豆腐徐长卿
59分钟前
9
0
介绍python中运算符优先级

下面这个表给出Python的运算符优先级,从最低的优先级(最松散地结合)到最高的优先级(最紧密地结合)。这意味着在一个表达式中,Python会首先计算表中较下面的运算符,然后在计算列在表上部...

问题终结者
今天
3
0
Spring Boot 2.x基础教程:快速入门

简介 在您第1次接触和学习Spring框架的时候,是否因为其繁杂的配置而退却了?在你第n次使用Spring框架的时候,是否觉得一堆反复黏贴的配置有一些厌烦?那么您就不妨来试试使用Spring Boot来让...

程序猿DD
昨天
9
0
SpringSecurity认证流程源码级详解

SpringSecurity认证流程源码级详解 认证流程说明 认证结果如何在多个请求之间共享 获取认证用户信息

chendom
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部