Struts2 整合jQuery实现Ajax功能

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  下载jQuery：http://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           jQuery的Ajax

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

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

jQuery的Ajax很简单，仅仅使用核心文件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（）方法：中间有三个参数：url，data（json格式），回调函数（回调函数可以定义在他处，此处仅写函数名）

$.post("test.jsp",

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

     function(data){

          alert("Data Loaded: " + data);

   });

3           Struts2整合jQuery

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

$.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" οnblur="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);

            }