ajax怎么隐藏数据_三级联动和搜索框提示 +数据库+ajax 050

我会带着你远行 2023-01-01 14:54 69阅读 0赞

![af4565ae832f6e09a61b0ac4f4a1de7f.png][]

/\*\* 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

省: <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>")

\})

\* \*/

<script type="text/javascript" src="myjs/jquery-1.9.1.js"></script>  
  
<script>  
//创建计数器**var** count=-1;  
//声明延迟发送的id**var** 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 id="container" style="width: 550px;margin: auto;">  
  
<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 id="dataDiv" style="width: 398px;height: 300px;border: solid 1px;border-top: none;display: none" ></div>  
</div>

[af4565ae832f6e09a61b0ac4f4a1de7f.png]: /images/20221120/ad2a2b86fdb34dec99eeacc86d48be00.png