Jquery客户端脚本使用说明书Word文档格式.docx
- 文档编号:20442227
- 上传时间:2023-01-23
- 格式:DOCX
- 页数:28
- 大小:31.37KB
Jquery客户端脚本使用说明书Word文档格式.docx
《Jquery客户端脚本使用说明书Word文档格式.docx》由会员分享,可在线阅读,更多相关《Jquery客户端脚本使用说明书Word文档格式.docx(28页珍藏版)》请在冰豆网上搜索。
<
inputtype="
button"
id="
ddd"
name="
value="
ajax测试"
/>
JavaScript内容:
scripttype="
text/javascript"
>
$('
#ddd'
).click(function(event){
$.ajax({
type:
"
POST"
url:
%=path%>
/ajaxCheck.action"
data:
name=John&
location=Boston"
success:
function(msg){
alert("
DataSaved:
+msg);
}
});
});
/script>
AjaxCheckAction内容:
一:
获取参数内容
System.out.println("
name"
+request.getParameter("
));
location"
二:
向客户端写内容:
Writerwriter=ServletActionContext.getResponse().getWriter();
//struts2需要首先获取HttpServletResponse。
其他情况只要获取此对象即可。
writer.write("
向客户端写的内容"
);
//向客户端写的内容即为msg。
success:
alert("
}
注:
此方法也包含一些其他参数此处不做说明。
可参考《JQuery1.5.1中文API》。
2.1.2load的用法
load(url,[data],[callback])
Html内容:
testLoad"
load测试"
divid="
divResult"
/div>
Javascript内容:
#testLoad'
$("
#divResult"
).load("
/ajaxCheck.action?
name=nihao&
location=shenyang"
{
"
resultType"
:
html"
},function(responseText,textStatus,XMLHttpRequest){
alert('
responseText'
+responseText);
textStatus'
+textStatus);
XMLHttpRequest'
+XMLHttpRequest);
//同上。
2.1.3$.get的用法
jQuery.get(url,[data],[callback],[type])
testGet"
get测试"
$('
#testGet'
$.get("
ajaxCheck.action"
{name:
John"
location:
2pm"
},
function(data){
alert("
DataLoaded:
+data);
});
2.1.4$.post的用法
jQuery.post(url,[data],[callback],[type])
testPost"
post测试"
#testPost'
privateStringname;
privateStringlocation;
publicStringgetName(){
returnname;
}
publicvoidsetName(Stringname){
this.name=name;
publicStringgetLocation(){
returnlocation;
publicvoidsetLocation(Stringlocation){
this.location=location;
publicStringexecute()throwsException{
+name+"
:
+location);
返回客户端的内容"
对于$.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"
xmlns="
//www.w3.org/1999/xhtml"
head>
title>
jQuery
Ajax
-
AjaxEvent<
/title>
SCRIPTtype="
src="
../js/jquery-1.5.1.min.js"
/SCRIPT>
script
type="
$(document).ready(function()
{
$("
#btnAjax"
).bind("
click"
function(event)
$.get("
})
).ajaxComplete(function(evt,
request,
settings)
{
$(this).append('
div>
ajaxComplete<
'
).ajaxError(function(evt,
ajaxError<
).ajaxSend(function(evt,
ajaxSend<
).ajaxStart(function()
ajaxStart<
).ajaxStop(function()
ajaxStop<
).ajaxSuccess(function(evt,
ajaxSuccess<
/head>
body>
br
/>
button
id="
btnAjax"
发送Ajax请求<
/button>
br/>
div
/body>
结果为:
了解了事件的执行顺序更有利于我们对Ajax的处理。
2.2JQuery校验
首先此框架是由“validator”框架改进而成,因此同样需要“jQuery”基本
库文件做支持。
所需js类库jquery-1.5.1.min.js、validator-1.1.js。
方法简介:
checkNull
checkNull:
检查是否为空。
checkEmail
checkEmail:
检查email。
checkWebAddr
checkWebAddr:
检查网址填写格式。
checkEN
checkEN:
检查是否为英文。
checkCH
checkCH:
检查是否为汉字。
checkLimit
checkLimit(int,int):
检查输入数字是否在规定范围内。
checkMaxLength
chekcMaxLength(int):
最大长度。
checkMinLength
checkMinLength(int):
最小长度。
checkPwd
checkPwd(id):
比较两次输入内容是否一致。
checkInteger
checkInteger:
检查输入内容是否为整数(含负)。
checkDigits
checkDigits:
检查输入内容是否为正整数(含0)。
checkAlphanum
checkAlphanum:
检查输入内容是否为英文或数字。
checkIp
checkIp:
检查Ip(无端口号)填写格式。
checkIpAndPort
chekcIpAndPort:
检查Ip填写格式。
(端口号可有可无)
checkMobile
checkMobile:
检查手机号码填写格式。
checkPhone
checkPhone:
检查座机类电话号码填写格式。
checkMobileOrPhone
checkMobileOrPhone:
检查手机或电话号码填写格式。
checkCustomize
checkCustomize(regex):
传入条件进行检查。
regex:
自定义正则表达式。
使用实例:
检查输入内容是否为空或包含空格。
返回:
用于提示用户的提示语,提示语使用“[]”包装。
eg:
<
inputtype=“text”id=“”checkMode=“checkNull[输入内容不能空]”/>
检查输入内容格式是否匹配email格式。
返回:
用于提示用户的提示语,提示语使用“[]”包装。
eg:
inputtype=“text”id=“”checkMode=“checkEmail[Email格式不正确]”/>
检查输入内容格式是否匹配网址格式。
inputtype=“text”id=“”checkMode=“checkWebAddr[网址格式不正确]”/>
检查输入内容格式是否匹配英文格式。
inputtype=“text”id=“”checkMode=“checkEN[必须为英文]”/>
检查输入内容格式是否匹配中文格式。
inputtype=“text”id=“”checkMode=“checkCH[必须为中文]”/>
inputtype=“text”id=“”checkMode=“checkLimit[年龄范围不合法]”/>
限制允许输入内容的最大字符。
参数:
最大内容长度。
inputtype=“text”id=“”checkMode=“checkMaxLength(5)[内容不能大
于5位]”/>
限制允许输入内容的最小字符。
最小内容长度。
inputtype=“text”id=“”checkMode=“checkMinLength(5)[内容不能小
要比较的另一个文本框的id。
inputtype=“text”id=“”checkMode=“checkPwd(userPwd)[两次密码输
入不相同]”/>
inputtype=“text”id=“”checkMode=“checkInteger[请输入一个正确的整数
值.]”/>
检查输入内容是否为正整数(含0)。
inputtype=“text”id=“”checkMode=“checkDigits[请输入一个非负整数,
含0]”/>
检查输入内容是否为英文或数字。
inputtype=“text”id=“”checkMode=“checkAlphanum[请输入英文字母或
正数]”/>
检查Ip(无端口号)填写格式。
inputtype=“text”id=“”checkMode=“checkIp[IP地址格式不正确.]”/>
检查Ip填写格式。
inputtype=“text”id=“”checkMode=“checkIpAndPort[IP地址格式不正
确.]”/>
检查手机号码填写格式。
inputtype=“text”id=“”checkMode=“checkMobile[手机格式不正确.]”/>
检查座机类电话号码填写格式。
inputtype=“text”id=“”checkMode=“checkPhone[电话格式不正确.]”/>
检查手机或电话号码填写格式。
inputtype=“text”id=“”checkMode=“checkMobileOrPhone[电话或手机号
码格式不正确.]”/>
传入正则表达式进行检查。
regex:
自定义正则表达式。
注:
正则表达式格式必须完整“/^$/”必须写
inputtype=“text”id=“”checkMode=“checkCustomize(/^\d+(\.\d+)?
$/)[格式不正确.]”/>
全局校验,提交表单。
vdSubmit
全局校验,并提交。
submitButton:
按钮名称,即点击的按钮id。
formId:
表单id。
action:
提交路径
$(function(){
$(“#submitButton”).vdSubmit({
“formId”:
“form1”,
“action”:
“addUserAction.action”
注意:
所有校验均可进行多种校验。
格式如下
inputtype=“text”id=“”checkMode=“checkXX[]|checkYY[]”/>
2.3upload文件
JQuery上传文件采用的是JQuery的uploadify插件。
能够实现带进度条效果,并能够实现多文件上传。
具体实现过程
工程内引入
jquery.uploadify-v2.1.4包下的所有文件;
封装的fileupload.js;
jquery-1.5.1.min.js
这里jquery.uploadify.v2.1.4.js已经修改过,原文件的所有提示均为英文提示,并且当文件名过长的时候不能完全显示文件名称,此处修改为所有提示为中文提示,并且当文件名称过长时显示的形式为“文件名称…”当鼠标滑动到文字上时会显示全部文字。
代码如下
fileupload.Js
(function($){
/**
*上传文件
*@param{Object}path工程根路径即为request.getContextPath();
*@param{Object}action上传文件的Action
*@param{Object}size单个文件的大小
*@param{Object}fileExt允许上传的文件类型
*@param{Object}auto是否自动上传,设置为true当选择文件后就直接上传了,为false需要点击上传按钮才上传。
*@param{Object}multi是否可以一次上传多个文件,设置为true时可以上传多个文件。
*@param{Object}simUploadLimit每次允许同时上传的文件
*@memberOf{TypeName}
*/
$.fn.fileupload=function(path,action,size,fileExt,auto,multi,simUploadLimit,formId,completeAction){
varfileDesc="
;
if(fileExt!
=null){
fileDesc="
Files("
+fileExt+"
)"
$(this).uploadify({
'
uploader'
pa
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Jquery 客户端 脚本 使用 说明书