jsp 二级联动下拉表单框数据回显_047 Ajax 三级联动与搜索框提示语

12 Ajax 案例之省市区三级联动

三级联动定义：页面中有三个下拉框选项，分别为
省、市、县下拉框，选择对应的框，显示对应的省、市、县信息。
技术分析：ajax技术+jsp+servlet+jdbc
需求分析（思路）：
​ 1、 创建页面：页面中有三个下拉框，分别为省、市、县区
​ 2、页面加载成功发起 ajax 请求，请求省的信息，并将响应的经过填充到省下拉框中
​ 3、选择省信息，请求对应的市信息，并将响应结果填充到下拉框中
​ 4、选择市信息，请求对应的区/县信息，并将响应结果填充到下拉框中
数据库设计：
​ 创建表（area） ： 存储了省、市、区/县信息
​ 设计表实现一：只存储了数据，但是数据的层次关系没有体现
​ 地区id：areaid
​ 地区名：areaname
​ 设计表实现二：
​ 地区id：areaid
​ 地区名：areaname
​ 地区上级id：parentid
​ sql语句设计：
​ 查询所有的省信息 ：select * from area where parentid=0;
​ 查询选择的省下的市信息（假如：选择的省的areaid 为110000）
​ select * from area where areaid = 110000；
​ 查询选择市下的县/区信息（假如：选择的市的areaid 为120000）：
​ select * from area where areaid = 120000；
​ 代码： select * from area where areaid = ？；
​ 数据库实现：导入 area.sql 语句执行
代码缺陷：
​ 代码的重复冗余大
解决：相同的保留，不同的传参

​

12.1 代码实现

只展现前端代码，后面只做一个事情。
bug，选择每个下拉框的第一个地区，体验不好。

12.1.1 未加联动

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

12.1.2 添加联动

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

12.1.3 封装

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

12.2 效果图

• 未加联动

• 加联动


12.3 总结

1. 良好的数据库设计，可让后期操作更加便捷。

```sql select * from area where areaid = ？；

```

1. 实现联动的代码举例：

<

13 ajax 案例之搜索框提示语

功能需求：
​ 用户再搜索框中输入关键字，然后搜索框出现下拉选项，提示关键字的提示语
​ 用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键选择
技术分析：
​ ajax技术+servlet+jsp+jdbc
功能分析（思路）：
​ 1、创建搜索界面（搜索框和提示语div 和搜索按钮）
​ 2、 给搜索框添加 onkeyup 时间， 键盘弹起时发送 ajax 请求
​ 请求当前用户输入的信息对应的提示语数据
​ 3、将提示语数据填充到搜索框下的div 中
​ 4、实现使用鼠标选择提示语
​ 5、实现使用键盘的上和下键选择提示语
​ 6、实现鼠标和键盘的联动操作
​ 7、将显示提示语的 div 进行隐藏，当有提示语的时候进行显示
完善：
​ 问题：只要用户在搜索框中出现键盘点击动作，都会触发键盘事件的执行
​ 而只要数据符合要求，都会发送 ajax 请求，请求提示语信息。点击一次都发一次。
​ 但是其实只需求最后一次进行请求发生即可。
​ 解决1：
​ 使用延迟发送请求
​ 使用1：
​ window.setTimeout()
​ 问题2：
​ even 对象在火狐浏览器中使用window.event 获取不到
​ 解决：
​ 函数声明形参 event，必须是event
​ var reg = /^s+$/g/ 空格校验
数据库设计：
​ 创建表：（data）存储了常用的关键字数据
​ 关键字编号：id
​ 关键字数据：title
​ 次数：count
​ 说明：remark
​ 添加测试数据：要求前期测试数据为英文单词
​ SQL 语句设计：查询以用户当前搜索框数据开头的关键字
​ select * from data where title like 'a%';
​

13.1 添加鼠标悬停事件

小技巧：将 css 赋于空字符串，即可清空属性值
注意：事件一定是添加已经存在的 html 代码上的，即注意事件添加的位置

<

13.2 键盘上下键选择

选择当前 div 的位置，通过全局变量 count 控制。

<

13.3 获取键盘输入的 javascript 码值

利用 BOM 对象中 window.event.keyCode
注意：keyCode 中 k 小写

<

13.4 延迟函数

var id = window.setTimeout(function(){},delay) ,注意 id 相当于线程号
window.clearTimeout(id) ，清空当前延时线程，防止每次键盘弹出都发送一个 ajax 请求，浪费资源

<

13. 5 代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

13.6 总结

1. 搜索提示语设计涉及的 js 知识较多，其中 BOM 对象使用不太熟悉。
2. 搜索提示语其中的细节比较多。

14 ajax 整合项目之删除用户

功能分析：在当前页面上删除用户，然后刷新当前浏览器。

<