Ajax之三级联动

效果图




中国地理位置省市区编码表 mysql_ajax


需求分析

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

技术分析

核心：ajax+数据库操作

需求分析

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

数据库设计

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

数据库设计代码：


SET FOREIGN_KEY_CHECKS=0;
-- ----------------------------
-- Table structure for `area`
-- ----------------------------
DROP TABLE IF EXISTS `area`;
CREATE TABLE `area` (
  `areaid` int(18) NOT NULL COMMENT '区域编号',
  `areaname` varchar(50) NOT NULL COMMENT '区域名称',
  `parentid` int(18) NOT NULL COMMENT '父级编号',
  `arealevel` int(3) NOT NULL COMMENT '区域等级(1省/2市/3区县)',
  `status` int(1) NOT NULL DEFAULT '1' COMMENT '状态（1可用/0不可用）',
  PRIMARY KEY (`areaid`),
  UNIQUE KEY `UK_WEBSITE_AREA` (`areaid`,`parentid`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;


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

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" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%--
--%>
<html>
<head>
    <script src="js/jquery.js"></script>
    <style>
        body {
            background-color: lightgray;
        }

        div {
            margin: 0 auto;
            width: 700px;
            margin-top: 20%;

        }

        select {
            width: 200px;
            height: 30px;
        }
    </style>
</head>
<body>
<div>
    省<select name="" id="province"></select>
    市<select name="" id="city"></select>
    区/县<select name="" id="county"></select>
</div>
</body>
<script>
    function getData(pid, selName) {
        $.get("test", {pid: pid}, function (result) {
            //通过eval函数吧获取到的数据转换成js代码
            eval（"var data=" + result);
            var sel = $("#" + selName);
            //清除下拉框内容
            sel.empty();
            //填充下拉框
            for (var i = 0; i < data.length; i++) {
                sel.append("<option value='" + data[i].areaId + "'>" + data[i].areaName + "</option>")
            }
            //触发selName下拉框的change时间
            $("#" + selName).trigger("change");
        })
    }

    $(function () {
        //页面加载后获取省信息
        getData(0, "province");
        //省改变后获取市内容
        $("#province").change(function () {
            var pid = $(this).val();
            getData(pid, "city")
        })
        //市改变后获取市内容
        $("#city").change(function () {
            var pid = $(this).val();
            getData(pid, "county");
        })
    })
</script>
</html>