Ajax案例之三级联动和搜索框提示语的实现

最新推荐文章于 2022-03-26 19:54:32 发布

matao_jack

最新推荐文章于 2022-03-26 19:54:32 发布

阅读量252

点赞数 1

分类专栏： ajax 文章标签：基础知识学习

本文链接：https://blog.csdn.net/Piratesa/article/details/96169058

版权

这篇博客详细介绍了如何使用Ajax技术结合servlet、jsp和jdbc实现三级联动及搜索框提示功能。用户输入关键字时，通过Ajax发送请求获取匹配数据，用键盘或鼠标选择提示项。文章还讨论了如何处理键盘事件、延迟发送请求以及浏览器兼容性问题，并提供了数据库设计和查询语句的示例。

摘要由CSDN通过智能技术生成

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文件导入到数据库中即可
		功能实现：参照源码即可
		代码缺陷：
			发现请求省，市，县的代码中基本上是一致的。代码的冗余量有点大
		解决:
			考虑使用封装
		实现:形同的保留，不同的传参。具体参照源码

代码实现：

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'select.jsp' starting page</title>

     <!--引入jQuery文件  -->
     <script type="text/javascript" src="js/j.js"></script>
     <!--声明js代码域  -->
     <script type="text/javascript">
     	//页面加载成功请求省的信息
     	$(function(){
     		
     		//发起ajax请求，请求所有的省信息
	     		$.get("area",{parentid:0},function(data){
	     			//使用eval方法将数据转换为js对象
	     				eval("var areas="+data);
	     			//将响应省数据填充到省下拉框中
	     				//获取下拉框对象
	     				var sel=$("#pre");
	     				//清空原有内容
	     				sel.empty();
	     				//遍历
	     				for(var i=0;i<areas.length;i++){
	     					//