ajax coap_Ajax实现三级联动省市查询

Ajax之三级联动

效果图

需求分析

页面中有三个下拉框选项，分别为省下拉框，市下拉框，区/县下拉框
选择省，则市下拉框中出现对应的省的下拉的市的信息，选择市，则区/县下拉框中出现对应的数据

技术分析

核心：ajax+数据库操作

需求分析

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

数据库设计

创建表(area):存储了省、市、区/县信息
设计表实现一：之村粗了数据，但是数据之间的层级关系没有存储
地区id：areaid
地区名：areaname
设计表实现而：
地区id：areadid
地区名：areaname
地区的上级id：parentid

数据库设计代码：

SET 

测试数据将在最后奉上（代码太多！！）

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 = ?

此处将不演示java操作的代码

前端ajax代码实现：

<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="utf-8" %>

省市区县数据

链接：

链接：https://pan.baidu.com/s/1LEJKdvjVe17OORYD_QU2gQ

提取码：5ih8