ajax之三级联动案例
1.项目需求?
页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框
选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中
出现对应的该市下面的区/县信息
2.技术分析:
ajax技术+jsp+servlet+jdbc
3.需求分析(思路):
1、创建页面：页面中有三个下拉框，分别为省、市、区/县
2、页面加载成功发起ajax请求，请求省的信息，并将响应结果
填充到省下拉框中
3、选择省触发一个新的js函数 的执行，该函数中发起新的ajax请求
请求该省下的市信息，并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请, 请求该市下的区/县信息，并将数据填充到区/县下拉框中
5.数据库设计：
创建表(area)：存储了省、市、区/县信息
设计表实现一：只存储了数据，但是数据之间的层级关系没有存储。
地区id:areaid
地区名:areaname
设计表实现二：
地区id:areaid
地区名:areaname
地区上级id：parentid
6.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=?;
7.代码实现：
7.1、创建页面：页面中有三个下拉框，分别为省、市、区/县
7.2、页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省下拉框中
方法说明：$.get("servlet别名"，"json格式的请求参数"，回调函数)；
元素对象.empty();//清空元素原有内容
元素对象.append(“增加的元素标签")，//增加子标签
$("#id名").trigger('事件名') //触发某个事件的执行
与parentNode.appendChild()的区别在于：
parentNode.append()可以同时传入多个节点或字符串，没有返回值；他会有兼容问题
而parentNode.appendChild()只能传一个节点，且不直接支持传字符串(需要parentNode.appendChild(document.createTextElement('字符串'))代替)，返回追加的Node节点
7.3、选择省触发一个新的js函数 的执行，该函数中发起新的ajax请求请求该省下的市信息，并将响应数据填充到市下拉框
7.4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请, 请求该市下的区/县信息，并将数据填充到区/县下拉框中
7.5、ajax的封装
实现原理：:形同的保留，不同的传参。
注意事项：￥（“#”+sid）.trigger('change') 触发事件的方法必须写在ajax声明监听函数中，因为触发的事件依赖于其相应的结果。
ajax之搜索框提示语
1.功能需求：
用户在搜索框中输入关键字，然后搜索框下出现下拉选项，提示关键字的提示语。
用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。
2.技术分析：
ajax技术+servlet+jsp+jdbc
3.功能分析(思路)：
1、创建搜索界面(搜索框和提示语div和搜索按钮)
2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求，请求当前用户输入的信息对应的提示语数据
3、将提示语数据填充到搜索框下的div中
4、实现使用鼠标选择提示语
5、实现使用键盘的上和下键选择提示语
6、实现鼠标和键盘的联动操作
7、将显示提示语的div进行隐藏，当有提示语的时候显示隐藏的div
4.数据库设计：
4.1、创建表:(data) 存储了常用的关键字数据
关键字编号：id
关键字数据：title
说明：remark
添加测试数据:要求前期测试数据为英文单词（后期需要使用正则表达式做数据和空格的判断）
4.2、SQL语句设计:查询以用户当前搜索框数据开头的关键字
select * from t_data where title like concat('a','%');
concat(ser1,ser2)为字符串拼接函数
5.功能实现：
5.1.创建搜索界面(搜索框和提示语div和搜索按钮。
5.2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求，请求当前用户输入的信息对应的提示语数据
5.3、将提示语数据填充到搜索框下的div中
5.4/实现使用鼠标选择提示语
5.5、实现使用键盘的上和下键选择提示语
5.6、实现鼠标和键盘的联动操作
5.7、将显示提示语的div进行隐藏，当有提示语的时候显示隐藏的div
隐藏：
显示：
8.、延迟发送请求。
8.1为什么需要延迟发送请求？
只要用户在搜索框中出现键盘点击动作，都会触发键盘事件的执行。而只要数据符合要求，都会发送ajax请求，请求提示语信息。点击一次都发一次。但是其实只需要最后一次进行请求发生即可。
具体方法：int i = window.setTimeout（function(){},延迟的秒数）
返回的为延迟的整数类型，需要设置为全局变量。
9.判断按键code值。
9.1为什么需要判断按键值？
按键弹起事件是当所有的按键弹起时都会触发的事件，可事实上有些键弹起时不需要触发弹起事件，则需要根据按键的值来判断是否要触发弹起键盘弹起事件。
event对象是用来或取键盘值的对象，当event对象在火狐浏览器中使用window.event获取不到。则需要在获取浏览器中使用传参的方式给event进行赋值。如上图function(event);
后框判断搜索框时空字符串或者符合正则表达式时，返回。正则表达式 为 var reg=/^\s+$/g;
判断按键是否是空格键。
