Ajax案例-三级联动-搜索框提示语

01ajax之三级联动案例分析

1.1简答题
根据视频中的讲解，完成以下内容
1.1.1视频中的三级联动案例的功能需求是什么
页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框，选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/县下拉框中出现对应的该市下面的区/县信息
1.1.2视频中的需求分析的内容是
1、创建页面：页面中有三个下拉框，分别为省、市、区/县
2、页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省下拉框中
3、选择省触发一个新的js函数的执行，该函数中发起新的ajax请求，请求该省下的市信息，并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax请求，请求该市下的区/县信息，并将数据填充到区/县下拉框中

02-ajax之三级联动数据库设计和实现

2.1 编程题
2.1.1 根据视频讲解完成三级联动数据库表设计。
既存储了地区信息也存储了省、市、区/县之间的关系
地区id:areaid
地区名:areaname
地区上级id：parentid
2.1.2 根据视频讲解完成三级联动案例的SQL语句设计。

##查询所有的省信息
select * from area where parentid=0;
##查询安徽省下的市信息
select * from area where parentid=340000;
##查询六安市下的区/县信息
select * from area where parentid=341500;

2.1.3 根据视频讲解将area.sql文件导入到数据库中。

03 ajax之三级联动代码实现获取所有的省信息

3.1 上机练习
3.2.1 根据视频讲解完成前台jsp页面的创建。

<body style="background-color:black; color: white;font-size: 23px"><div style="margin-top: 200px;margin-left: 100px"> 省： <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></body>

3.2.2 在select.jsp中声明ajax代码请求省信息

$.get("area",{parentid:0},function(data){alert(data);})

3.2.3 完成请求省信息的后台功能，并能alert出请求的省信息。

AreaServlet:
public class AreaServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp)throws ServletException, IOException {//设置请求编码格式req.setCharacterEncoding("utf-8");//设置响应编码格式resp.setContentType("text/html;charset=utf-8");//获取请求信息String pid = req.getParameter("parentid");System.out.println(pid);//处理请求信息AreaService as = new AreaServiceImpl();List<Area> list = as.selAreaInfoService(pid);//响应处理结果//直接响应resp.getWriter().write(new Gson().toJson(list));}
}
AreaService:
public interface AreaService {List<Area> selAreaInfoService(String pid);}
AreaServiceImpl:
public class AreaServiceImpl implements AreaService{@Overridepublic List<Area> selAreaInfoService(String pid) {SqlSession session = MybatisUtil.getSession();AreaMapper mapper = session.getMapper(AreaMapper.class);List<Area> list = mapper.selById(pid);session.close();return list;}}
AreaMapper.java:
public interface AreaMapper {List<Area> selById(String parentid);
}
AreaMapper.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="an.sz.mapper.AreaMapper"><select id="selById" parameterType="string" resultType="area">select * from area where parentid=#{0}</select></mapper>

04ajax之三级联动实现省信息填充和市信息功能

4.1编程题
4.1.1 根据视频，将省信息填充到省下拉框中？

$.get("area",{parentid:0},function(data){//alert(data);//将获取到的响应数据转成js对象var areas = eval(data);//将数据添加进省的下拉选框中//获取省的下拉选框var pre = $("#pre");//清空内容pre.empty();for(var i=0;i<areas.length;i++){pre.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");}})

4.1.2 根据视频讲解完成市信息下拉框功能？


$("#pre").change(function(){var areaid = $("#pre").val();$.get("area",{parentid:areaid},function(data){//将获取到的数据转成js对象var areas = eval(data);//清空市下拉选框的内容var city = $("#city");city.empty();for(var i=0;i<areas.length;i++){city.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");}});})

05ajax之三级联动代码完整实现

5.1 简答题
5.1.1 根据视频讲解完成城镇信息下拉框功能?

$("#city").change(function(){var areaid = $("#city").val();$.get("area",{parentid:areaid},function(data){var areas = eval(data);var town = $("#town");town.empty();for(var i=0;i<areas.length;i++){town.append("<option>"+areas[i].areaname+"</option>");}});})

5.1.2 根据视频讲解，目前实现的三级联动中为什么选择省信息后，市信息为改变但是城镇信息还是不变？如何解决？并在代码实现。
因为在一开始的时候省信息是在页面刚开始加载的时候就触发，但是此时市级信息是需要等省级下拉框改变值时才触发，城镇下拉框也是一样的道理，所以没有触发时信息是不改变的。在代码中添加trigger，表示在运行时触发一次改变的函数
5.1.3 根据视频讲解完成代码的封装

//封装成公共方法function getData(areaid,sid){$.get("area",{parentid:areaid},function(data){//alert(data);//将获取到的响应数据转成js对象var areas = eval(data);//将数据添加进省的下拉选框中//获取省的下拉选框var pre = $("#"+sid);//清空内容pre.empty();for(var i=0;i<areas.length;i++){pre.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");}$("#"+sid).trigger("change");})}

06ajax之搜索框提示语功能需求和思路分析

6.1 简答题
6.1.1 视频中的功能需求是什么?
用户在搜索框中输入关键字，然后搜索框下出现下拉选项，提示关键字的提示语。用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。
6.1.2 视频讲解的功能分析(思路)的内容是？。
1、创建搜索界面(搜索框和提示语div和搜索按钮)
2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求
请求当前用户输入的信息对应的提示语数据
3、将提示语数据填充到搜索框下的div中
4、实现使用鼠标选择提示语
5、实现使用键盘的上和下键选择提示语
6、实现鼠标和键盘的联动操作
7、将显示提示语的div进行隐藏，当有提示语的时候显示隐藏的div

07ajax之搜索框提示语功能数据库设计和实现

7.1 简答题
7.1.1 根据视频讲解完成提示语功能的数据库设计?
数据库设计：
创建表:(data) 存储了常用的关键字数据
关键字编号：id
关键字数据：title
说明：remark
添加测试数据:要求前期测试数据为英文单词
7.1.2 根据视频讲解完成提示语功能的SQL语句设计。
SQL语句设计:查询以用户当前搜索框数据开头的关键字
select * from t_data where title like ‘a%’
7.1.3 根据视频讲解完成数据库的实现。

08-ajax之搜索框体提示语功能页面创建和键盘事件添加

8.1 编程题
8.1.1 根据视频完成提示语功能页面的创建。

<body><div id="con" style="width: 500px;margin: auto;margin-top: 200px"><div id="sdiv"><input type="text" name="serach" value="" id="serach" style="width: 300px;height: 30px;"/><input type="button" value="搜索" style="width: 100px;height: 30px"/></div><div id="tdiv" style="width: 298px;height: 245px;border: 1px solid;border-top: none;"></div></div></body>

8.2.2完成键盘事件的添加。

<script type="text/javascript">$(function(){$("#sdiv").keyup(function(){alert("弹起");})})</script>

09ajax之搜索框提示语功能后台逻辑实现

9.1 编程题
9.2.1 根据视频完成提示语功能后台代码的实现。

10ajax之搜索框提示语功能数据填充和键盘码判断

10.1编程题
10.1.1 根据视频，完成提示语数据填充到div中。

var sd = $("#search").val();$.get("search",{sdata:sd},function(data){//alert(data);//将响应数据转成js对象var dd = eval(data);//获取div对象var div = $("#tdiv");//清空之前的内容div.empty();for(var i=0;i<dd.length;i++){div.append("<div>"+dd[i].title+"</div>");}

10.2.2 根据视频判断键盘码完善ajax代码。

$("#sdiv").keyup(function(){//alert("弹起");//添加event事件对象var ev = window.event;var code = ev.keyCode;//alert(code);//在指定的键的情况下发送ajax请求if(code>=65&&code<=90 || code==8){//获取搜索框的数据var sd = $("#search").val();if(sd==""){return;}$.get("search",{sdata:sd},function(data){//alert(data);//将响应数据转成js对象var dd = eval(data);//获取div对象var div = $("#tdiv");//清空之前的内容div.empty();for(var i=0;i<dd.length;i++){div.append("<div>"+dd[i].title+"</div>");}})

11ajax之搜索框提示语功能鼠标选择提示语

11.2 编程题
11.2.1 完成鼠标选择功能。

//给所有tdiv下的div添加鼠标悬停事件$("#tdiv div").mouseover(function(){//删除其他div的背景样式$("#tdiv div").css("background-color","");//当鼠标悬停在一个div上时改变当前div的背景颜色$(this).css("background-color","gray");})//给所有tdiv下的div添加鼠标点击事件$("#tdiv div").click(function(){//获取搜索框对象并赋值$("#search").val($(this).html());//获取tdiv对象并隐藏$("#tdiv").css("display","none");})

12ajax之搜索框提示语功能键盘下键功能实现

12.1 编程题
12.1.1 完成视频下键选择功能。

if(code==40){if($("#tdiv div").length>0){count = count<$("#tdiv div").length-1?++count:0;//清空背景颜色$("#tdiv div").css("background-color","");$("#tdiv div:eq("+count+")").css("background-color","gray");//把div的值赋值到搜索框中$("#search").val($("#tdiv div:eq("+count+")").html());}}

13ajax之搜索框提示语功能上键功能和键盘鼠标联动和延迟发送请求

13.2 编程题
13.2.1 完成键盘上键选择功能。

if(code==38){if($("#tdiv div").length>0){count = count>0?--count:$("#tdiv div").length-1;//清空背景颜色$("#tdiv div").css("background-color","");$("#tdiv div:eq("+count+")").css("background-color","gray");$("#search").val($("#tdiv div:eq("+count+")").html());}}

13.2.2 完成键盘鼠标联动选择功能
在鼠标悬停事件中添加如下代码：
//鼠标和键盘的联动，将当前鼠标选择的div的角标赋值给计数器
count = $(this).index();

13.2.3 完成延迟发送请求功能

//清除之前的将要发的请求window.clearTimeout(id);//延迟发送请求id=window.setTimeout(function(){//发起ajax请求，请求当前用户搜索框数据的提示语信息。$.get("search",{sdata:sd},function(data){//使用eval方法将数据转换为对象eval("var sd="+data);//获取提示语div元素对象var dataDiv=$("#dataDiv");//清空原有内容dataDiv.empty();//显示隐藏的divif(sd.length>0){dataDiv.css("display","");}//将提示语数据填充到div中for(var i=0;i<sd.length;i++){dataDiv.append("<div style='padding:5px;'>"+sd[i].title+"</div>");}//给提示语添加鼠标选择效果$("#dataDiv div").mouseover(function(){//清空所有提示语的div的背景颜色$("#dataDiv div").css("background-color","");//将当前选择的div北京颜色变成灰色$(this).css("background-color","gray");//鼠标和键盘的联动，将当前鼠标选择的div的角标赋值给计数器count=$(this).index();})//给提示语div添加单击事件，用来选择提示语$("#dataDiv div").click(function(){//将当前选择的div中的提示语数据改变到搜索框中$("#search").val($(this).html());//隐藏当前填充所有提示语的div$("#dataDiv").css("display","none"); })  })}, 1000)}

14ajax之搜索框提示语功能大结局

14.2 编程题
14.2.1 根据视频完整实现提示语功能
详细代码见上所示

15ajax之整合项目删除功能修改

15.1 编程题
15.2.1 根据视频使用ajax完成jsp和Servlet整合项目的删除功能。

<script type="text/javascript">
function del(uid){if(confirm("确定删除吗？")){//发起ajax请求$.get("data",{method:"delUser",uid:uid},function(data){if(eval(data)){alert("用户删除成功");window.location.href="data?method=selAll";}})}
}