技术领域非常多东西流行,自然有流行的道理。这几天用了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非常easy,只使用核心文件jQuery.js就能够实现了。
函数 |
描写叙述 |
jQuery.ajax() |
运行异步 HTTP (Ajax) 请求。 |
jQuery.get() |
使用 HTTP GET 请求从server载入数据。 |
jQuery.getJSON() |
使用 HTTP GET 请求从server载入 JSON 编码数据。 |
jQuery.post() |
使用 HTTP POST 请求从server载入数据。 |
有关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);
}