Ajax案例之三級聯(lián)動：
? ? 功能需求：
? ? 頁面中有三個下拉框選項祈噪，分別為省下拉框台妆，市下拉框绽榛，區(qū)/縣下拉框
? ? 選擇省瞭郑，則市下拉框中出現(xiàn)對應的該省下的市信息氮趋，選擇市伍派，則區(qū)/縣下拉框中
? ? 出現(xiàn)對應的該市下面的區(qū)/縣信息
? ? 技術(shù)分析:
? ? ajax技術(shù)+jsp+servlet+jdbc
? ? 需求分析(思路):
? ? 1、創(chuàng)建頁面：頁面中有三個下拉框剩胁，分別為省诉植、市、區(qū)/縣
? ? 2昵观、頁面加載成功發(fā)起ajax請求晾腔，請求省的信息，并將響應結(jié)果
? ? ? ? ? 填充到省下拉框中
? ? 3啊犬、選擇省觸發(fā)一個新的js函數(shù) 的執(zhí)行灼擂，該函數(shù)中發(fā)起新的ajax請求
? ? ? ? ? 請求該省下的市信息，并將響應數(shù)據(jù)填充到市下拉框
? ? 4觉至、選擇市信息觸發(fā)一個新的js函數(shù)的執(zhí)行剔应，該函數(shù)中發(fā)起新的ajax請求
? ? ? ? 請求該市下的區(qū)/縣信息，并將數(shù)據(jù)填充到區(qū)/縣下拉框中
? ? 數(shù)據(jù)庫設(shè)計：
? ? 創(chuàng)建表(area)：存儲了省语御、市峻贮、區(qū)/縣信息
? ? 設(shè)計表實現(xiàn)一：只存儲了數(shù)據(jù)，但是數(shù)據(jù)之間的層級關(guān)系沒有存儲应闯。
? ? 地區(qū)id:areaid
? ? 地區(qū)名:areaname
? ? 設(shè)計表實現(xiàn)二：
? ? 地區(qū)id:areaid
? ? 地區(qū)名:areaname
? ? 地區(qū)上級id：parentid
? ? sql語句設(shè)計:
? ? 查詢所有的省信息:
? ? select * from area where parentid=0;
? ? 查詢選擇的省的市信息(假如：選擇的山東省的areaid為110000,)
? ? select * from area where parentid=110000;
? ? 查詢選擇的市的區(qū)/縣信息(假如：選擇的山東省的濟南市areaid為110001)
? ? select * from area where parentid =110001;
? ? 代碼中
? ? select * from area where parentid=?;
? ? 數(shù)據(jù)庫實現(xiàn):將資料中提供的area.sql文件導入到數(shù)據(jù)庫中即可
? ? 功能實現(xiàn)：參照源碼即可
? ? 代碼缺陷：
? ? 發(fā)現(xiàn)請求省纤控，市，縣的代碼中基本上是一致的孽锥。代碼的冗余量有點大
? ? 解決:
? ? 考慮使用封裝
? ? 實現(xiàn):形同的保留嚼黔，不同的傳參细层。
<!-- 引入jQuery文件 -->
? <script type="text/javascript" src="js/j.js"></script>
? <!-- 聲明js代碼域 -->
? <script type="text/javascript">
? $(function() {
? getDate(0,"pre");
? $("#pre").change(function() {
? //獲取當前選擇的省的areaid
? var areaid =$("#pre").val();
? getDate(areaid, "city")
? })
? $("#city").change(function() {
? //獲取當前選擇的市的areaid
? var areaid =$("#city").val();
? getDate(areaid, "xq");
? })
/* //發(fā)起ajax請求惜辑，加載省的信息
$.get("as",{parentid:0},function(data){
//使用eval方法將數(shù)據(jù)轉(zhuǎn)化成js對象
eval("var areas="+data);
//將響應數(shù)據(jù)填寫到省的下拉框中
//獲取下拉框?qū)ο?/p>
var sel=$("#pre");
//清空原有內(nèi)容
sel.empty();
//遍歷
for(var i=0;i<areas.length;i++){
//填充
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
}
//觸發(fā)省下拉框的change事件
$("#pre").trigger("change");
});
? //頁面加載成功給省添加onchange事件
? $("#pre").change(function() {
? //獲取當前選擇的省的areaid
? var areaid =$("#pre").val();
//發(fā)起Ajax請求，請求當前省的市信息
$.get("as",{parentid:areaid},function(data){
//使用eval方法將數(shù)據(jù)轉(zhuǎn)化為js對象
eval("var areas="+data);
//獲取下拉框?qū)ο?/p>
var sel=$("#city");
//情況原有數(shù)據(jù)
sel.empty();
//遍歷
for (var i = 0; i < areas.length; i++) {
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
}
//觸發(fā)市下拉框的change事件
$("#city").trigger("change");
})
});
? //頁面加載成功給市添加onchange信息
? $("#city").change(function () {
? //獲取當前選擇的市的aread
? var areaid = $("#city").val();
? //發(fā)起ajax請求疫赎，請求當前市下的區(qū)/縣信息
$.get("as",{parentid:areaid},function(data){
//使用eval方法將數(shù)據(jù)轉(zhuǎn)化為js對象
eval("var areas="+data);
//獲取下拉框?qū)ο?/p>
var sel=$("#xq");
//情況原有數(shù)據(jù)
sel.empty();
//遍歷
for (var i = 0; i < areas.length; i++) {
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
}
})
})
*/
//封裝公共方法
function getDate(areaid,sid) {
//發(fā)起Ajax請求盛撑，請求當前省的市信息
$.get("as",{parentid:areaid},function(data){
//使用eval方法將數(shù)據(jù)轉(zhuǎn)化為js對象
eval("var areas="+data);
//獲取下拉框?qū)ο?/p>
var sel=$("#"+sid);
//情況原有數(shù)據(jù)
sel.empty();
//遍歷
for (var i = 0; i < areas.length; i++) {
sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
}
//觸發(fā)市下拉框的change事件
$("#"+sid).trigger("change");
})
};
? })
? </script>
? </head>
? <body style="background-color: gray;">
<div style="margin: auto;width: 750px;margin-top: 200px">
省：<select name="" id="pre" style="width: 200px;height: 30px"></select>
市：<select name="" id="city" style="width: 200px;height: 30px"></select>
區(qū)/縣：<select name="" id="xq" style="width: 200px;height: 30px"></select>
</div>
? </body>
ajax之搜索框關(guān)鍵字提示語：
功能需求：
用戶在搜索框中輸入關(guān)鍵字捧搞，然后搜索框下出現(xiàn)下拉選項抵卫，提示關(guān)鍵字的提示語狮荔。
用戶可以使用鼠標進行提示語的選擇，也可以使用鍵盤的上下鍵來進行選擇介粘。
技術(shù)分析：
ajax技術(shù)+servlet+jsp+jdbc
功能分析(思路)：
1殖氏、創(chuàng)建搜索界面(搜索框和提示語div和搜索按鈕)
2、給搜索框添加onkeyup事件姻采，鍵盤彈起時發(fā)送ajax請求
? 請求當前用戶輸入的信息對應的提示語數(shù)據(jù)
3雅采、將提示語數(shù)據(jù)填充到搜索框下的div中
問題：
現(xiàn)在用戶在搜索框上單擊鍵盤的任意一個鍵都會發(fā)起ajax請求，請求提示語數(shù)據(jù)慨亲。
解決：
判斷用戶單擊的鍵盤的按鍵符合要求再發(fā)請求婚瓜。
解決：
獲取用戶按了鍵盤的哪個鍵。使用event對象進行按鍵的鍵盤碼值獲取
4刑棵、實現(xiàn)使用鼠標選擇提示語
5巴刻、實現(xiàn)使用鍵盤的上和下鍵選擇提示語
6、實現(xiàn)鼠標和鍵盤的聯(lián)動操作
7蛉签、將顯示提示語的div進行隱藏胡陪，當有提示語的時候顯示隱藏的div
完善：
問題1：只要用戶在搜索框中出現(xiàn)鍵盤點擊動作，都會觸發(fā)鍵盤事件的執(zhí)行碍舍。
而只要數(shù)據(jù)符合要求督弓，都會發(fā)送ajax請求，請求提示語信息乒验。點擊一次都發(fā)一次愚隧。
但是其實只需要最后一次進行請求發(fā)生即可。
解決1:
使用延遲發(fā)送請求锻全。
使用1：
window.setTimeout
問題2：
event對象在火狐瀏覽器中使用window.event獲取不到狂塘。
解決2:
在獲取瀏覽器中使用傳參的方式給event進行賦值。
使用：參照源碼即可
數(shù)據(jù)庫設(shè)計：
創(chuàng)建表:(data)? 存儲了常用的關(guān)鍵字數(shù)據(jù)
關(guān)鍵字編號：id
關(guān)鍵字數(shù)據(jù)：title
說明：remark
添加測試數(shù)據(jù):要求前期測試數(shù)據(jù)為英文單詞
SQL語句設(shè)計:查詢以用戶當前搜索框數(shù)據(jù)開頭的關(guān)鍵字
select * from t_data where title like 'a%'
注意：
測試數(shù)據(jù)不要太多鳄厌。
數(shù)據(jù)庫實現(xiàn)：在數(shù)據(jù)庫中創(chuàng)建表即可,并添加測試數(shù)據(jù)荞胡。
? <!-- 引入jQuery -->
? <script type="text/javascript" src="js/j.js"></script>
? <!-- 聲明js代碼域 -->
? <script type="text/javascript">
? //頁面加載成功完成頁面加載初始化
? //創(chuàng)建計數(shù)器
? var count=-1;
? $(function() {
//給搜索框添加彈起事件
$("#search").keyup(function(event) {
//正則表達式獲取空格
var reg=/^\s+$/g;
//獲取event對象
var evn=window.event || event;
//獲取用戶點擊當前鍵盤的鍵盤值
var code = evn.keyCode;
//判斷code值是否符合
if(code>=65&&code<=90 || code==8 || code==32){
//獲取當前用戶搜索框的數(shù)據(jù)
var sd=$("#search").val();
if(sd==""|| reg.test(sd)){
return;
}
//清除之前要發(fā)請求
//window.clearTimeout(id);
//延遲發(fā)送Ajax請求
window.setTimeout(function () {
//發(fā)起Ajax請求，請求當前用戶搜索框數(shù)據(jù)的提示語信息了嚎。
$.get("search",{sdata:sd},function(data){
//使用eval將原有數(shù)據(jù)轉(zhuǎn)化為js對象
eval("var sd="+data);
//獲取div元素
var dataDiv=$("#dataDiv");
//清空數(shù)據(jù)
dataDiv.empty();
//顯示隱藏的div
$("#dataDiv").css("display","");
//填充
for (var i = 0; i < sd.length; i++) {
dataDiv.append("<div style='padding: 5px'>"+sd[i].title)+"</div>";
}
//給提示語添加鼠標效果
$("#dataDiv div").mouseover(function() {
//清空所有背景顏色
$("#dataDiv div").css("background-color","");
//當前選擇的div的背景顏色為灰色
$(this).css("background-color","gray");
//鼠標與鍵盤聯(lián)動效果泪漂，將當前鼠標選擇的div角標賦值給計數(shù)器
count=$(this).index();
})
//給提示語添加單擊事件，用來選擇提示語
$("#dataDiv div").click(function() {
//將當前選擇的提示語改變到搜索框中
$("#search").val($(this).html());
//隱藏所有當前提示語的div
$("#dataDiv").css("display","none");
})
})
}, 1000)
}
//判斷用戶點擊是否是鍵盤下鍵
if(code==40){
//判斷是否有提示語
if($("#dataDiv div").length>0){
//判斷
count=count<$("#dataDiv div").length-1?++count:0;
//清空所有背景顏色
$("#dataDiv div").css("background-color","");
//當前選擇的div的背景顏色為灰色
$("#dataDiv div:eq("+count+")").css("background-color","gray");
//將當前選擇的提示語發(fā)送到搜索框中
$("#search").val($("#dataDiv div:eq("+count+")").html());
}
}
//判斷用戶點擊是否是鍵盤上鍵
if(code==38){
//判斷是否有提示語
if($("#dataDiv div").length>0){
//判斷
count=count>0?--count:$("#dataDiv div").length-1;
//清空所有背景顏色
$("#dataDiv div").css("background-color","");
//當前選擇的div的背景顏色為灰色
$("#dataDiv div:eq("+count+")").css("background-color","gray");
//將當前選擇的提示語發(fā)送到搜索框中
$("#search").val($("#dataDiv div:eq("+count+")").html());
}
}
})
})
? </script>
? </head>
? <body>
? <!-- 將搜索框div與提示語div顯示到一起 -->
? <div id="container" style="width: 500px;margin: auto;">
? <!-- 搜索框div -->
<div id="sdiv" style="width: 500px;margin: auto;margin-top: 200px;" >
? ? <input type="text" name="search" id="search" value="" style="width: 400px;height: 35px;font-size: 18px"/>
? ? <input type="button" value="搜索" style="width: 80px;height:35px;"/>
? </div>
? <!-- 提示語div -->
? ? <div id="dataDiv" style="width: 398px;height: 300px;border: solid 1px;">
? ? </div>
? ? </div>
? </body>
