如何利用Ajax实现地区三级联动详解

下面是详细讲解“如何利用Ajax实现地区三级联动”的攻略。

一、前置知识

在学习本攻略之前，建议您掌握以下知识：

HTML、CSS、JavaScript的基础知识
jQuery库的使用

二、需求分析

本次攻略是要实现一个地区三级联动的功能，即：根据用户选择的省、市、区，实时动态加载下一个级别的选项列表。

为了达到这个目的，我们需要先上手写一个基本的HTML结构，如下所示：

<form action="">
  <select name="province" id="province">
    <option value="">请选择省份</option>
  </select>
  <select name="city" id="city">
    <option value="">请选择城市</option>
  </select>
  <select name="area" id="area">
    <option value="">请选择区域</option>
  </select>
</form>

三、实现思路

下面，我们来看一下实现这个功能的思路：

基于Ajax向后端发送GET请求，获取省份数据，并填充到省份选项列表。
监听省份选项列表的change事件，当用户选择省份后，再基于Ajax向后端发送GET请求，获取对应的城市数据，并填充到城市选项列表中。
监听城市选项列表的change事件，当用户选择城市后，再基于Ajax向后端发送GET请求，获取对应的区域数据，并填充到区域选项列表中。

四、实现代码解析

1. 获取省份数据

我们可以先在页面加载完成后，就调用Ajax方法向后端请求省份数据，并将数据填充到省份列表中。

$(document).ready(function() {
  // 请求省份数据
  $.ajax({
    type: "GET",
    url: "url/to/provinces",
    dataType: "json",
    success: function(data) {
      // data为后端返回的省份数据，其结构如下所示：
      // [
      //   { id: 1, name: "省份1" },
      //   { id: 2, name: "省份2" },
      //   ...
      // ]
      // 将数据填充到省份选项列表中
      var $province = $("#province");
      $.each(data, function(index, item) {
        $province.append("<option value='" + item.id + "'>" + item.name + "</option>");
      });
    }
  });
});

2. 获取城市数据

当用户选择省份后，下一步就是根据用户选择的省份，请求相应的城市数据，并将数据填充到城市选项列表中。

$("#province").change(function() {
  // 获取用户所选的省份的id
  var provinceId = $(this).val();
  if (provinceId) {
    // 向后端请求对应的城市数据
    $.ajax({
      type: "GET",
      url: "url/to/cities?province_id=" + provinceId,
      dataType: "json",
      success: function(data) {
        // data为后端返回的城市数据，其结构如下所示：
        // [
        //   { id: 1, name: "城市1" },
        //   { id: 2, name: "城市2" },
        //   ...
        // ]
        // 将数据填充到城市选项列表中
        var $city = $("#city");
        $.each(data, function(index, item) {
          $city.append("<option value='" + item.id + "'>" + item.name + "</option>");
        });
        // 清空区域选项
        $("#area").empty().append("<option value=''>请选择区域</option>");
      }
    });
  } else {
    $("#city").empty().append("<option value=''>请选择城市</option>");
    $("#area").empty().append("<option value=''>请选择区域</option>");
  }
});

3. 获取区域数据

当用户选择城市后，最后一步就是根据用户选择的城市，请求相应的区域数据，并将数据填充到区域选项列表中。

$("#city").change(function() {
  // 获取用户所选的城市的id
  var cityId = $(this).val();
  if (cityId) {
    // 向后端请求对应的区域数据
    $.ajax({
      type: "GET",
      url: "url/to/areas?city_id=" + cityId,
      dataType: "json",
      success: function(data) {
        // data为后端返回的区域数据，其结构如下所示：
        // [
        //   { id: 1, name: "区域1" },
        //   { id: 2, name: "区域2" },
        //   ...
        // ]
        // 将数据填充到区域选项列表中
        var $area = $("#area");
        $.each(data, function(index, item) {
          $area.append("<option value='" + item.id + "'>" + item.name + "</option>");
        });
      }
    });
  } else {
    $("#area").empty().append("<option value=''>请选择区域</option>");
  }
});

至此，地区三级联动功能就实现了。

五、示例

以下是两个示例：

示例一：基于静态JSON数据

前端代码：

$(document).ready(function() {
  // 请求省份数据
  $.getJSON("data/provinces.json", function(data) {
    // 将数据填充到省份选项列表中
    var $province = $("#province");
    $.each(data, function(index, item) {
      $province.append("<option value='" + item.id + "'>" + item.name + "</option>");
    });
  });

  // 监听省份选项列表的改变事件
  $("#province").change(function() {
    var provinceId = $(this).val();
    if (provinceId) {
      // 请求城市数据
      $.getJSON("data/cities.json", { province_id: provinceId }, function(data) {
        // 填充数据到城市选项列表中
        var $city = $("#city");
        $city.empty().append("<option value=''>请选择城市</option>");
        $.each(data, function(index, item) {
          $city.append("<option value='" + item.id + "'>" + item.name + "</option>");
        });
      });
    } else {
      // 清空城市选项列表和区域选项列表
      $("#city").empty().append("<option value=''>请选择城市</option>");
      $("#area").empty().append("<option value=''>请选择区域</option>");
    }
  });

  // 监听城市选项列表的改变事件
  $("#city").change(function() {
    var cityId = $(this).val();
    if (cityId) {
      // 请求区域数据
      $.getJSON("data/areas.json", { city_id: cityId }, function(data) {
        // 填充数据到区域选项列表中
        var $area = $("#area");
        $area.empty().append("<option value=''>请选择区域</option>");
        $.each(data, function(index, item) {
          $area.append("<option value='" + item.id + "'>" + item.name + "</option>");
        });
      });
    } else {
      $("#area").empty().append("<option value=''>请选择区域</option>");
    }
  });
});

数据（省份、城市、区域）的格式如下：

{
  "provinces": [
    { "id": 110000, "name": "北京市" },
    { "id": 120000, "name": "天津市" },
    ...
  ],
  "cities": [
    { "id": 110100, "name": "北京市", "province_id": 110000 },
    { "id": 110200, "name": "县", "province_id": 110000 },
    ...
  ],
  "areas": [
    { "id": 110101, "name": "东城区", "city_id": 110100 },
    { "id": 110102, "name": "西城区", "city_id": 110100 },
    ...
  ]
}

示例二：基于动态JSON数据