ajax案列练习

最新推荐文章于 2023-02-01 22:39:58 发布

素拾

最新推荐文章于 2023-02-01 22:39:58 发布

阅读量208

点赞数

分类专栏： Ajax

本文链接：https://blog.csdn.net/qq_43364293/article/details/100109506

版权

Ajax 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

学习主题：AJAX深入练习
学习目标：
1 熟练使用ajax写功能

1ajax之三级联动案例分析

1.1简答题
根据视频中的讲解，完成以下内容
1.1.1视频中的三级联动案例的功能需求是什么
1、页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框
2、选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/ 县下拉框中
3、出现对应的该市下面的区/县信息

1.1.2视频中的需求分析的内容是
1、创建页面：页面中有三个下拉框，分别为省、市、区/县
2、页面加载成功发起ajax请求，请求省的信息，并将响应结果填充到省下拉框中
3、选择省触发一个新的js函数的执行，该函数中发起新的ajax请求
请求该省下的市信息，并将响应数据填充到市下拉框
4、选择市信息触发一个新的js函数的执行，该函数中发起新的ajax 请求，请求该市下的区/县信息，并将数据填充到区/县下拉框中

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

2.1 编程题
2.1.1 根据视频讲解完成三级联动数据库表设计。
创建表(area)：存储了省、市、区/县信息
设计表实现一：只存储了数据，但是数据之间的层级关系没有存储。
地区id:areaid
地区名:areaname
设计表实现二：
地区id:areaid
地区名:areaname
地区上级id：parentid

2.1.2 根据视频讲解完成三级联动案例的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=?;

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

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

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

 <body style="background-color: pink;">
  	<div style="margin: auto;width: 750px;margin-top: 200px;">
  		省: <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 {
	@Override
	protected 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{
	@Override
	public 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 mapper
 PUBLIC "-//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 根据视频，将省信息填充到省下拉框中？

$(function(){
			$.get("area",{parentid:0},function(data){
				//将数据转为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>");
				}
			});

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

//页面加载成功给省加onchange事件
			$("#pre").change(function(){
				//获取省areaid
				var areaid=$("#pre").val();
				//获取市信息
				$.get("area",{parentid:areaid},function(data){
					//将数据转换为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>");
					}
				})
			});

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

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

//页面加载完给市一个onchange事件
			$("#city").change(function(){
				//获取市的areaid
				var areaid=$("#city").val();
				//获取区县信息
				$.get("area",{parentid:areaid},function(data){
					//将数据转为js格式
					eval("var areas="+data);
					//获取下拉框
					var sel=$("#town");
					//清空原有数据
					sel.empty();
					//遍历
					for(var i=0;i<areas.length;i++){
						//填充数据
						sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
					}		
				})
			})

5.1.2 根据视频讲解，目前实现的三级联动中为什么选择省信息后，市信息为改变但是城镇信息还是不变？如何解决？并在代码实现。

因为目前实现的还只是两级联动，当省信息发生改变会触动市的改变，但是市的onchange事件需要人为手动去触发。使用trigger触动指定事件。

//加载页面时发起请求
		$(function(){
			$.get("area",{parentid:0},function(data){
				//将数据转为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>");
				}
				$("#pre").trigger("change");//触发指定事件
			});
			//页面加载成功给省加onchange事件
			$("#pre").change(function(){
				//获取省areaid
				var areaid=$("#pre").val();
				//获取市信息
				$.get("area",{parentid:areaid},function(data){
					//将数据转换为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>");
					}
					$("#city").trigger("change");
					
				})
			});
			
			//页面加载完给市一个onchange事件
			$("#city").change(function(){
				//获取市的areaid
				var areaid=$("#city").val();
				//获取区县信息
				$.get("area",{parentid:areaid},function(data){
					//将数据转为js格式
					eval("var areas="+data);
					//获取下拉框
					var sel=$("#town");
					//清空原有数据
					sel.empty();
					//遍历
					for(var i=0;i<areas.length;i++){
						//填充数据
						sel.append("<option value='"+areas[i].areaid+"'>"+areas[i].areaname+"</option>");
					}			
				})
			})
		})

5.1.3 根据视频讲解完成代码的封装

//加载页面时发起请求
		$(function(){
			//获取省
			getData(0,"pre");
			
			//页面加载成功给省加onchange事件
			$("#pre").change(function(){
				//获取省areaid
				var areaid=$("#pre").val();
				getData(areaid,"city");
			});
			
			//页面加载完给市一个onchange事件
			$("#city").change(function(){
				//获取市的areaid
				var areaid=$("#city").val();
				getData(areaid,"town");
					
				})
		
			
			//抽取公共部分
			function getData(areaid,sid){
					//获取市信息
					$.get("area",{parentid:areaid},function(data){
						//将数据转换为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>");
						}
						$("#"+sid).trigger("change");			
					})	
			}
		})

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

6.1 简答题
6.1.1 视频中的功能需求是什么?

用户在搜索框中输入关键字，然后搜索框下出现下拉选项，提示关键字的提示语。
用户可以使用鼠标进行提示语的选择，也可以使用键盘的上下键来进行选择。

6.1.2 视频讲解的功能分析(思路)的内容是？
1、创建搜索界面(搜索框和提示语div和搜索按钮)
2、给搜索框添加onkeyup事件，键盘弹起时发送ajax请求
请求当前用户输入的信息对应的提示语数据
3、将提示语数据填充到搜索框下的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();
			 				//显示隐藏的div
			 				if(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";
			 }
		 })
	}
}

素拾

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax案列练习

学习主题：AJAX深入练习学习目标：1 熟练使用ajax写功能1ajax之三级联动案例分析1.1简答题根据视频中的讲解，完成以下内容1.1.1视频中的三级联动案例的功能需求是什么1、页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框2、选择省，则市下拉框中出现对应的该省下的市信息，选择市，则区/ 县下拉框中3、出现对应的该市下面的区/县信息1.1.2视频中的需求分析...
复制链接

扫一扫

专栏目录