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);
}
转自: http://my.oschina.net/sunfei/blog/33208