AJAX三级联动与搜索框提示语功能学习

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() {

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");

})

/* //发起ajax请求，加载省的信息

$.get("as",{parentid:0},function(data){

//使用eval方法将数据转化成js对象

eval("var areas="+data);

//将响应数据填写到省的下拉框中

//获取下拉框对象

var sel=$("#pre");

//清空原有内容

sel.empty();

//遍历

for(var i=0;i<areas.length;i++){

//填充

sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");

}

//触发省下拉框的change事件

$("#pre").trigger("change");

});

//页面加载成功给省添加onchange事件

$("#pre").change(function() {

//获取当前选择的省的areaid

var areaid =$("#pre").val();

//发起Ajax请求，请求当前省的市信息

$.get("as",{parentid:areaid},function(data){

//使用eval方法将数据转化为js对象

eval("var areas="+data);

//获取下拉框对象

var sel=$("#city");

//情况原有数据

sel.empty();

//遍历

for (var i = 0; i < areas.length; i++) {

sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");

}

//触发市下拉框的change事件

$("#city").trigger("change");

})

});

//页面加载成功给市添加onchange信息

$("#city").change(function () {

//获取当前选择的市的aread

var areaid = $("#city").val();

//发起ajax请求，请求当前市下的区/县信息

$.get("as",{parentid:areaid},function(data){

//使用eval方法将数据转化为js对象

eval("var areas="+data);

//获取下拉框对象

var sel=$("#xq");

//情况原有数据

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) {

//发起Ajax请求，请求当前省的市信息

$.get("as",{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");

})

};

})

</script>

</head>

省：<select name="" id="pre" style="width: 200px;height: 30px"></select>

市：<select name="" id="city" style="width: 200px;height: 30px"></select>

区/县：<select name="" id="xq" style="width: 200px;height: 30px"></select>

</div>

</body>

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%'

注意：

测试数据不要太多。

数据库实现：在数据库中创建表即可,并添加测试数据。

//页面加载成功完成页面加载初始化

//创建计数器

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){

//获取当前用户搜索框的数据

var sd=$("#search").val();

if(sd==""|| reg.test(sd)){

return;

}

//清除之前要发请求

//window.clearTimeout(id);

//延迟发送Ajax请求

window.setTimeout(function () {

//发起Ajax请求，请求当前用户搜索框数据的提示语信息。

$.get("search",{sdata:sd},function(data){

//使用eval将原有数据转化为js对象

eval("var sd="+data);

//获取div元素

var dataDiv=$("#dataDiv");

//清空数据

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");

//鼠标与键盘联动效果，将当前鼠标选择的div角标赋值给计数器

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");

//将当前选择的提示语发送到搜索框中

$("#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");

//将当前选择的提示语发送到搜索框中

$("#search").val($("#dataDiv div:eq("+count+")").html());

}

})

</script>

</head>

<body>

</div>

</div>

</body>

AJAX三级联动与搜索框提示语功能学习

推荐阅读更多精彩内容