AJAX實例
今天是AJAX在web開
發中的典型應用，也是AJAX的最后一天課，老佟不愧是AJAX的行家，以至于每個班的AJAX都是他帶的，老佟講課風趣極了，課
堂總是不是傳來同學們笑聲。。。經過三天的js和昨天的AJAX的學習，今天終于可以體現一下無刷新的感覺。
日期驗證：
1. 日期驗證的需求:
1). 當 birth 輸入框中的文字是 "請輸入您的生日"
時, 鼠標獲取焦點時,
文本框中的字符變為空格
2). 當失去焦點時, 若文本框中的字符為空格,
使其值重新設為 "請輸入您的生日"
3). 當失去焦點, 且文本框中的字符不是空格,
且其值發生變化時, 發送
Ajax
請求到服務器端驗證輸入的日期格式是否合法.
①. 若不合法, 給出 "您輸入的日期不合法"
②. 若合法, 給出 "您輸入的日期合法"
2. Ajax 請求時提示信息
3.有等待的特效
工程整體結構如圖：注：使用的是jQuery庫
1.
新建input-date.jsp頁面，關鍵代
碼：
2.
<script type="text/javascript"
src="${pageContext.request.contextPath}/scripts/jquery-1.3.1.js"></script>
<script
type="text/javascript">
$(function(){
$("#birth").focus(function(){
var value = $.trim(this.value);
if(value == this.defaultValue){
this.value = "";
}
}).blur(function(){
var value = $.trim(this.value);
if(value == ""){
this.value = this.defaultValue;
}
}).change(function(){
var value = $.trim(this.value);
//再加一個需求：當文本框中的值發生變化, 且其
值不是默認值, 長度在
8 --10 之間,
此時會發送
Ajax 請求
if(value != this.defaultValue &&
value.length >= 8 &&
value.length <= 10){
var url =
"${pageContext.request.contextPath
}/dateValidateServlet";
var args = {time: new Date(),
birth: value};
$.post(url, args, function(data){
$("#datemsg").html(data);
});
}else{
alert("日期不合法!");
this.value = this.defaultValue;
}
});
});
</script>
</head>
<body>
<h3>Ajax Validation
Example</h3>
Birth date(yyyy-MM-dd): <input id="birth"
type="text" name="birth" value="請輸
入您的生日" />
<br>
<div
id="datemsg"></div>
</body>
2.新建DateValidateServlet，關鍵代碼：
//1. 獲取 birth
String birth = request.getParameter("birth");
//2. 驗證
Pattern p =
Pattern.compile("^((""d{2}(([02468][048])|([13579][26]))[""-""-""s]?((((0?"
+
"[13578])|(1[02]))[""-""-""s]?((0?[1-9])|([1-2][0-9])|(3[01])))"
+
"|(((0?[469])|(11))[""-""-""s]?((0?[1-9])|([1-2][0-9])|(30)))|"
+
"(0?2[""-""-""s]?((0?[1-9])|([1-2][0-9])))))|(""d{2}(([02468][12"
+
"35679])|([13579][01345789]))[""-""-""s]?((((0?[13578])|(1[02]))"
+
"[""-""-""s]?((0?[1-9])|([1-2][0-9])|(3[01])))|(((0?[469])|(11))"
+
"[""-""-""s]?((0?[1-9])|([1-2][0-9])|(30)))|(0?2[""-""-""s]?((0?["
+
"1-9])|(1[0-9])|(2[0-8]))))))");
boolean flag = p.matcher(birth).matches();
//3. 根據驗證結果返回字符串
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
if(flag){
out.println("<font
color='green'>日期格式合法</font>");
}else{
out.println("<font
color='red'>日期格式不合法</font>");
}
}
3.加上特效：
1.新建文件夾commons，再建ajax.jsp,寫代碼：
如下
<script type="text/javascript"
src="${pageContext.request.contextPath
}/scripts/jquery.blockUI.js"></script>
<script
type="text/javascript">
$().ajaxStart(function(){
$.blockUI({
message: $('img#loading'),
css: {
top: ($(window).height() -
150) /2 + 'px',
left: ($(window).width() - 400) /2 + 'px',
border: 'none',
padding: '5px',
color: '#fff'
},
overlayCSS: { backgroundColor: '#fff' }
});
}).ajaxStop($.unblockUI);
</script>
<img
id="loading"
alt=""
src="${pageContext.request.contextPath
}/images/loading.gif"
style="display:none" />
注：代碼可參看jquery.blockUI的文檔
2.在input_date.jsp
<head>標簽體中加上如下代碼：
<%@
include
file="/commons/ajax.jsp" %>
3.接著導入jquery.blockUI.js文件
4.最后，便可在tomcat下訪問：http://localhost:8080/ajax-1/input-date.jsp
,輸入合法日期，結果如圖
明天是Hibernate的課程。老徐講的，老徐講
課之深入已早有所耳聞，且待明天之開始！
posted on 2010-01-31 23:30
d66380022 閱讀(155)
評論(0) 編輯 收藏