/** areaid 选择要改变的事件 sid 获取下拉框对象
* 封装三级联动方法
*
* @param areaid
* @param sid
* url 请求的servlet
* areaid 要发送的data数据
* sid 获取要添加的下拉框
*/
function getData(url,areaid,sid){
$.ajax({
//发起ajax请求,请求当前省的市信息
type: "get",
url: url,
data: {parentid: areaid},
success: function (data) {
//alert(data)
eval("var areas=" + data);
//获取下拉框对象
var sel = $("#" + sid);
//清空原有内容
sel.empty();
for (var i = 0; i < areas.length; i++) {
sel.append("<option value='" + areas[i].areaid + "'>" + areas[i].areaname + "</option>")
//触发省下拉框的change事件
$("#" + sid).trigger("change");
}
}
})
// //发起ajax请求,请求当前省的市信息
// $.get("area",{parentid:areaid},function(data){
// //使用eval方法将数据转换为js对象
// eval("var areas="+data);
// //获取下拉框对象
// var sel=$("#"+sid);
// //清空原有内容
// sel.empty();
// //遍历
// for(var i=0;i<areas.length;i++){
// sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>")
// }
// //触发省下拉框的change事件
// $("#"+sid).trigger("change");
// })
}
/** HTML
<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>
区县: <select name="" id="town" style="width: 200px;height: 30px;"></select>
</div>
* 数据库
* area.sql
*
* Ajax案例之三级联动:
功能需求:
页面中有三个下拉框选项,分别为省下拉框,市下拉框,区/县下拉框
选择省,则市下拉框中出现对应的该省下的市信息,选择市,则区/县下拉框中
出现对应的该市下面的区/县信息
技术分析:
ajax技术+jsp+servlet+jdbc
需求分析(思路):
1、创建页面:页面中有三个下拉框,分别为省、市、区/县
2、页面加载成功发起ajax请求,请求省的信息,并将响应结果
填充到省下拉框中
3、选择省触发一个新的js函数 的执行,该函数中发起新的ajax请求
请求该省下的市信息,并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行,该函数中发起新的ajax请求
请求该市下的区/县信息,并将数据填充到区/县下拉框中
数据库设计:
创建表(area):存储了省、市、区/县信息
设计表实现一:只存储了数据,但是数据之间的层级关系没有存储。
地区id:areaid
地区名:areaname
设计表实现二:
地区id:areaid
地区名:areaname
地区上级id:parentid
sql语句设计:
查询所有的省信息:
select * from area where parentid=0;
查询选择的省的市信息(假如:选择的山东省的areaid为110000,)
select * from area where parentid=110000;
查询选择的市的区/县信息(假如:选择的山东省的济南市areaid为110001)
select * from area where parentid =110001;
代码中
select * from area where parentid=?;
数据库实现:将资料中提供的area.sql文件导入到数据库中即可
功能实现:参照源码即可
代码缺陷:
发现请求省,市,县的代码中基本上是一致的。代码的冗余量有点大
解决:
考虑使用封装
实现:形同的保留,不同的传参。具体参照源码
$(function () {
$.ajax({
type:"get",
url:"area",
data:{parentid:0},
success:function (data) {
//用eval转换为js对象
eval("var list="+data)
var pre = $("#pre");
var city = $("#city");
city.empty();
//清空原有内容
pre.empty();
for(var i=0;list.length;i++){
pre.append("<option value='"+list[i].areaid+"'>"+list[i].areaname+"</option>")
}
}
})
//页面加载成功后触发省的
$("#pre").change(function () {
var areaid= $("#pre").val();
$.ajax({
type:"get",
url:"area",
data:{parentid:areaid},
success:function (data) {
eval("var areaid="+data);
var city = $("#city");
city.empty();
var town = $("#town");
town.empty();
for(var i=0;i<areaid.length;i++){
city.append("<option value='"+areaid[i].areaid+"'>"+areaid[i].areaname+"</option>")
// city.append("<option value='"+list[i].areaid+"'>"+list[i].areaname+"</option>")
}
$("#city").trigger("change");
}
})
})
//页面加载成功点击市后触发区的信息
$("#city").change(function () {
var areaid= $("#city").val();
$.ajax({
type:"get",
url:"area",
data:{parentid:areaid},
success:function (data) {
//alert(data)
eval("var areaid="+data);
var town = $("#town");
town.empty();
for(var i=0;i<areaid.length;i++){
town.append("<option value='"+areaid[i].areaid+"'>"+areaid[i].areaname+"</option>")
// city.append("<option value='"+list[i].areaid+"'>"+list[i].areaname+"</option>")
}
}
})
})
* */
<!--
ajax之搜索框关键字提示语:
功能需求:
用户在搜索框中输入关键字,然后搜索框下出现下拉选项,提示关键字的提示语。
用户可以使用鼠标进行提示语的选择,也可以使用键盘的上下键来进行选择。
技术分析:
ajax技术+servlet+jsp+jdbc
功能分析(思路):
1、创建搜索界面(搜索框和提示语div和搜索按钮)
2、给搜索框添加onkeyup事件,键盘弹起时发送ajax请求
请求当前用户输入的信息对应的提示语数据
3、将提示语数据填充到搜索框下的div中
问题:
现在用户在搜索框上单击键盘的任意一个键都会发起ajax请求,请求提示语数据。
解决:
判断用户单击的键盘的按键符合要求再发请求。
解决:
获取用户按了键盘的哪个键。使用event对象进行按键的键盘码值获取
4、实现使用鼠标选择提示语
5、实现使用键盘的上和下键选择提示语
6、实现鼠标和键盘的联动操作
7、将显示提示语的div进行隐藏,当有提示语的时候显示隐藏的div
完善:
问题1:只要用户在搜索框中出现键盘点击动作,都会触发键盘事件的执行。
而只要数据符合要求,都会发送ajax请求,请求提示语信息。点击一次都发一次。
但是其实只需要最后一次进行请求发生即可。
解决1:
使用延迟发送请求。
使用1:
window.setTimeout
问题2:
event对象在火狐浏览器中使用window.event获取不到。
解决2:
在获取浏览器中使用传参的方式给event进行赋值。
使用:参照源码即可
数据库设计:
创建表:(data) 存储了常用的关键字数据
关键字编号:id
关键字数据:title
说明:remark
添加测试数据:要求前期测试数据为英文单词
SQL语句设计:查询以用户当前搜索框数据开头的关键字
select * from t_data where title like 'a%'
注意:
测试数据不要太多。
数据库实现:在数据库中创建表即可,并添加测试数据。
-->
<!--引入jQuery文件 -->
<script type="text/javascript" src="myjs/jquery-1.9.1.js"></script>
<!--声明js代码域 -->
<script>
//创建计数器var count=-1;
//声明延迟发送的idvar id;
$(function () {
//键盘弹起事件
$("#search").keyup(function () {
//获取event事件var code = window.event
//获取keycod的键盘的值var keyCode =code.keyCode;
//声明正则表达式var reg=/^s+$/g;
//判断 keycode 在 1-9 和 a-z 之间 keyCode==8 删除键 keyCode==32 空格键if(keyCode>=48&&keyCode<=90|| keyCode==8 || keyCode==32){
//获取输入框的值var st =$("#search").val();
//判断请求数据是否为空if(st=="" || reg.test(st)){return;
}
//清除之前的要发送的内容
window.clearTimeout(id)
//一秒之后请求发送
id=window.setTimeout(function () {
//发送ajax请求
$.ajax({
type:"get",
url:"search",
data:{stdata:st},
success:function (data) {var dataDiv = $("#dataDiv");
//清空原有内容
dataDiv.empty();
//用eval放法转换为可以执行的js对象
eval("var datashu="+data)if(datashu.length>0){
$("#dataDiv").show();
}for(var i=0;i<datashu.length;i++){
//循环遍历 将 后台的值 追加到 id为dataDiv 的div 中
dataDiv.append("<div style='padding: 5px'>"+datashu[i].title+"</div>")
}
//给提示语添加鼠标选择效果
$("#dataDiv div").mouseover(function () {
//清空所有div的提示语的背景颜色
$("#dataDiv div").css({background:""});
//$(this).css("background-color","#f0f0f0");
$(this).css({background:"#f0f0f0"});
//鼠标和键盘的联动 将当前鼠标选择的div 赋值给计数器
count=$(this).index();
//将当前选择的值改变到搜索框中
$("#dataDiv div").click(function () {
//获取搜索框的值 并把提示语放到搜索框中
$("#search").val($(this).html());
})
})
$("#dataDiv").bind({
blur:function () {
$("#dataDiv").hide()
},
click:function () {
$("#dataDiv").hide()
}
})
}
})
},1000)
}
//判断是否是键盘上键if(keyCode==40){if($("#dataDiv").length>0){
count=count<$("#dataDiv div").length-1?++count:0;
$("#dataDiv div").css({background:""});
$("#dataDiv div:eq("+count+")").css("background-color","#f0f0f0")
$("#search").val($("#dataDiv div:eq("+count+")").html());
}
}
//判断是否是键盘下键if(keyCode==38){if($("#dataDiv").length>0){
count=count>0?--count:$("#dataDiv div").length-1;
$("#dataDiv div").css({background:""});
$("#dataDiv div:eq("+count+")").css("background-color","#f0f0f0")
$("#search").val($("#dataDiv div:eq("+count+")").html());
//将当期选择的div
}
}
//判断是否是键盘的确认键if(keyCode==13){
$("#search").val($("#dataDiv div:eq("+count+")").html());
}
})
})
</script>
</head>
<body>
<!--创建div容器将提示语div和搜索框div显示到一起 -->
<div id="container" style="width: 550px;margin: auto;">
<!--创建div进行搜索框的布局 -->
<div id="sdiv" style="width: 550px;margin: auto;margin-top: 200px;">
<input type="text" name="search" id="search" value="" style="width:400px;height: 30px;font-size: 18px;" />
<input type="button" value="搜索" style="height: 30px;width: 100px;position: absolute;top:200px;"/>
</div>
<!-- 提示语div -->
<div id="dataDiv" style="width: 398px;height: 300px;border: solid 1px;border-top: none;display: none" ></div>
</div>