Struts2 整合jQuery实现Ajax功能(1)
技术领域很多东西流行，自然有流行的道理，这几天用了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>
<SCRIPTtype="text/javascript">
functioncheckkey()
{
…………使用jQuery技术自定义的代码…………
}
</SCRIPT>
2 jQuery的Ajax
jQuery的内容非常庞杂，可以解决诸多方面的需求，主要包括：Ajax，页面效果，页面验证。
作为J2ee项目，我主要关注了一下Ajax和页面验证。
jQuery的Ajax很简单，仅仅使用核心文件jQuery.js就可以实现了。
|
函数 |
描述 |
|
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("DataLoaded: " + data);
});
3 Struts2整合jQuery
Struts2中主要的业务操作都是通过Action来完成的，此时就需要jQuery来访问Struts2的Action。
$.post("Action",……)
3.1 Login.jsp页面：
l 功能：用户登录，首先需要输入公司标识码：
l 正确：显示对勾；
l 错误：显示红叉；
l jQuery代码：
<SCRIPTtype="text/javascript" src="js/jquery/jquery-1.6.js"></script>
<SCRIPTtype="text/javascript">
function checkkey(){
var url = ‘getKeyExist‘;
var params ={companyKey:$(‘#ckey‘).attr(‘value‘)};
$(‘#warn‘).html("<imgsrc=‘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();"><spanid="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得到回调信息
繁琐，意义不打， 删去/略 !
3.2.2 Action自主完成响应(即自己完成结果对象的Json串行化，然后写入HttpServletResponse )：
后来发现，Action也可以自主完成响应，不需要Jsp的支持。代码修改如下：
l Action：新建了个方法getKeyExist，不提供返回值。
if(complist.size()>0)
remessage="<imgsrc=’image/ajax/yes.gif’/> ";
else
remessage="<imgsrc=’image/ajax/no.gif’ /> ";
HttpServletResponseresponse = ServletActionContext.getResponse();
response.setCharacterEncoding("UTF-8");
response.getWriter().write(remessage);
l struts.xml:重新建立了无结果result；
<actionname="getKeyExist" class="ResponseMessageAction"method="getKeyExist">
</action>
l 此时得到的响应就简单干净了很多。
上述方法已经可以得到响应的信息，但是在很多情况下，还需要对响应的结果进行区分，来决定不同的显示效果，此时，响应值就要携带更多的信息，也就是说不是简单的一个字符串，而是一个对象。那么使用Json格式相对来说就比较方便（3.1提到了Json的对象格式）。
l Action：响应信息改为json格式；
if(complist.size()>0){
remessage="{type:‘yes‘,show:‘<imgsrc=\"image/ajax/yes.gif\" />‘}";
}
else{
remessage="{type:‘no‘,show:‘<imgsrc=\"image/ajax/no.gif\" />‘}"; }
l jQuery：回调结果
function callbackFun(data){
eval(‘json=‘ + data +‘;‘); //自己解析Json响应数据
if(json.type==‘no‘){
$(‘#ckey‘).focus();
}
$(‘#warn‘).html(json.show);
}
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
