资源描述
Jquery客户端脚本使用说明书.docx
《Jquery客户端脚本使用说明书.docx》由会员分享，可在线阅读，更多相关《Jquery客户端脚本使用说明书.docx（28页珍藏版）》请在冰豆网上搜索。
Jquery客户端脚本使用说明书
JQuery客户端脚本框架使用说明书
制作人
制作时间
修改人
修改时间
修改内容
版本
于浩
2011-8-26
V1.0
一简介
jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。
当然jQuery本身包含很多东西，例如说对事件的处理、对Ajax的处理、以及对UI的处理等很多很多的内容；同时利用开发的插件也包含很多类别，例如导航类、分页类、提示框类、编辑器类、表格类、验证类、图表类、Form相关类、上传类、事件日期类、虚拟键盘类等等。
此处所封装的内容十分有限，甚至有些内容只是介绍了相关的用法。
如想了解JQuery更多的知识，请参考相关资料。
JQuery框架主要包含三部分内容：
1：
JQueryAjax的使用。
2：
JQUery校验框架的使用。
3：
JQuery文件上传。
版本：
《JQuery1.5.1》。
二具体内容分析
2.1ajax的使用
由于对JQueryAjax部分未作任何封装，所以在使用jQuery时只需要引入jquery-1.5.1.min.js即可。
这里只对ajax的使用做简单的介绍。
关于ajax的使用请大家注意三点：
1：
get方式请求最好加上时间戳，以免浏览器缓存对请求造成的影响。
2：
如果请求的字符串中含有中文字符，在某些浏览器下是否会出现中文乱码。
由于不同工程的编码方式不一致，以及浏览器的多样性，在这里很难提供一种完全解决方案，对于出现的具体问题，需要具体的解决方案。
3：
post方式请求参数的值应该通过对应的取值方式获取，（例如struts1系列通过form内封装属性，给予set、get方法。
然后在action中取值。
Struts2需要在action中提供属性与set、get方法。
）.
2.1.1$.ajax的用法
形式：
jQuery.ajax（[options]）
HTML内容：
JavaScript内容：
$（'#ddd'）.click（function（event）{
$.ajax（{
type:
"POST",
url:
"<%=path%>/ajaxCheck.action",
data:
"name=John&location=Boston",
success:
function（msg）{
alert（"DataSaved:
"+msg）;
}
}）;
}）;
AjaxCheckAction内容：
一：
获取参数内容
System.out.println（"name"+request.getParameter（"name"））;
System.out.println（"location"+request.getParameter（"location"））;
二：
向客户端写内容：
Writerwriter=ServletActionContext.getResponse（）.getWriter（）;
//struts2需要首先获取HttpServletResponse。
其他情况只要获取此对象即可。
writer.write（"向客户端写的内容"）;
//向客户端写的内容即为msg。
success:
function（msg）{
alert（"DataSaved:
"+msg）;
}
注：
此方法也包含一些其他参数此处不做说明。
可参考《JQuery1.5.1中文API》。
2.1.2load的用法
形式：
load（url,[data],[callback]）
Html内容：
Javascript内容：
$（'#testLoad'）.click（function（event）{
$（"#divResult"）.load（"<%=path%>/ajaxCheck.action?
name=nihao&location=shenyang",{
"resultType":
"html"
},function（responseText,textStatus,XMLHttpRequest）{
alert（'responseText'+responseText）;
alert（'textStatus'+textStatus）;
alert（'XMLHttpRequest'+XMLHttpRequest）;
}）;
}）;
AjaxCheckAction内容：
//同上。
2.1.3$.get的用法
形式：
jQuery.get（url,[data],[callback],[type]）
HTML内容：
JavaScript内容：
$（'#testGet'）.click（function（event）{
$.get（"ajaxCheck.action",{name:
"John",location:
"2pm"},
function（data）{
alert（"DataLoaded:
"+data）;
}）;
}）;
AjaxCheckAction内容：
//同上。
2.1.4$.post的用法
形式：
jQuery.post（url,[data],[callback],[type]）
HTML内容：
JavaScript内容：
$（'#testPost'）.click（function（event）{
$.get（"ajaxCheck.action",{name:
"John",location:
"2pm"},
function（data）{
alert（"DataLoaded:
"+data）;
}）;
}）;
AjaxCheckAction内容：
privateStringname;
privateStringlocation;
publicStringgetName（）{
returnname;
}
publicvoidsetName（Stringname）{
this.name=name;
}
publicStringgetLocation（）{
returnlocation;
}
publicvoidsetLocation（Stringlocation）{
this.location=location;
}
publicStringexecute（）throwsException{
System.out.println（"name"+name+":
location"+location）;
Writerwriter=ServletActionContext.getResponse（）.getWriter（）;
writer.write（"返回客户端的内容"）;
}
对于$.getJSON的用法与$.getScript的用法此处不做讲解。
2.1.5全局Ajax事件
在jQuery.ajaxSetup（options）中的options参数属性中,有一个global属性:
global值类型:
布尔值,默认值:
true,说明:
是否触发全局的Ajax事件.
这个属性用来设置是否触发全局的Ajax事件.全局Ajax事件是一系列伴随Ajax请求发生的事件.主要有如下事件:
名称
说明
ajaxComplete（callback）
AJAX请求完成时执行函数
ajaxError（callback）
AJAX请求发生错误时执行函数
ajaxSend（callback）
AJAX请求发送前执行函数
ajaxStart（callback）
AJAX请求开始时执行函数
ajaxStop（callback）
AJAX请求结束时执行函数
ajaxSuccess（callback）
AJAX请求成功时执行函数
以下示例说明其执行顺序：
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
//www.w3.org/1999/xhtml">
jQuery Ajax - AjaxEvent
$（document）.ready（function（）
{
$（"#btnAjax"）.bind（"click", function（event）
{
$.get（"ajaxCheck.action"）;
}）
$（"#divResult"）.ajaxComplete（function（evt, request, settings） { $（this）.append（'
ajaxComplete
'）; }）
$（"#divResult"）.ajaxError（function（evt, request, settings） { $（this）.append（'
ajaxError
'）; }）
$（"#divResult"）.ajaxSend（function（evt, request, settings） { $（this）.append（'
ajaxSend
'）; }）
$（"#divResult"）.ajaxStart（function（） { $（this）.append（'
ajaxStart
'）; }）
$（"#divResult"）.ajaxStop（function（） { $（this）.append（'
ajaxStop
'）; }）
$（"#divResult"）.ajaxSuccess（function（evt, request, settings） { $（this）.append（'
ajaxSuccess
'）; }）
}）;
发送Ajax请求
升级会员 