ajax省市县三级联动—示例代码

1、ajax省市县三级联动是一种常见的前端技术，用于实现在选择省份时，根据选择的省份自动加载对应的城市列表，再根据选择的城市自动加载对应的县区列表。这种联动的效果可以提高用户体验，减少用户的操作。

示例代码如下：

<!-- HTML部分 -->
<select id="province">
  <option value="">请选择省份</option>
  <option value="北京市">北京市</option>
  <option value="上海市">上海市</option>
  <option value="广东省">广东省</option>
  <!-- 其他省份选项 -->
</select>
<select id="city">
  <option value="">请选择城市</option>
</select>
<select id="county">
  <option value="">请选择县区</option>
</select>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script>
  // JavaScript部分
  $(document).ready(function() {
    // 当选择省份发生变化时
    $("#province").change(function() {
      var province = $(this).val(); // 获取选择的省份
      // 发送ajax请求，获取对应的城市列表
      $.ajax({
        url: "getCity.php", // 后端处理城市数据的接口
        type: "GET",
        data: { province: province }, // 将选择的省份作为参数传递给后端
        success: function(data) {
          // 清空城市列表
          $("#city").empty();
          $("#city").append('<option value="">请选择城市</option>');
          // 将返回的城市数据添加到城市列表中
          for (var i = 0; i < data.length; i++) {
            $("#city").append('<option value="' + data[i] + '">' + data[i] + '</option>');
          }
        }
      });
    });
    // 当选择城市发生变化时
    $("#city").change(function() {
      var city = $(this).val(); // 获取选择的城市
      // 发送ajax请求，获取对应的县区列表
      $.ajax({
        url: "getCounty.php", // 后端处理县区数据的接口
        type: "GET",
        data: { city: city }, // 将选择的城市作为参数传递给后端
        success: function(data) {
          // 清空县区列表
          $("#county").empty();
          $("#county").append('<option value="">请选择县区</option>');
          // 将返回的县区数据添加到县区列表中
          for (var i = 0; i < data.length; i++) {
            $("#county").append('<option value="' + data[i] + '">' + data[i] + '</option>');
          }
        }
      });
    });
  });
</script>

在上面的示例代码中，我们使用了HTML、JavaScript和jQuery库来实现ajax省市县三级联动。

在HTML部分，我们创建了三个下拉选择框，分别是省份、城市和县区的选择框。通过给每个选择框设置不同的id，方便在JavaScript中进行操作。

然后，在JavaScript部分，我们使用了jQuery库来简化ajax请求的操作。在页面加载完成后，我们使用`$(document).ready()`函数来绑定事件处理函数。当选择省份的下拉选择框发生变化时，我们获取选择的省份，并发送ajax请求到后端的`getCity.php`接口，将选择的省份作为参数传递给后端。后端根据接收到的省份参数，返回对应的城市列表数据。我们在ajax请求的`success`回调函数中，清空城市列表，并将返回的城市数据添加到城市列表中。

同样地，当选择城市的下拉选择框发生变化时，我们获取选择的城市，并发送ajax请求到后端的`getCounty.php`接口，将选择的城市作为参数传递给后端。后端根据接收到的城市参数，返回对应的县区列表数据。我们在ajax请求的`success`回调函数中，清空县区列表，并将返回的县区数据添加到县区列表中。

通过以上的示例代码，我们实现了ajax省市县三级联动，用户选择省份时，自动加载对应的城市列表，再选择城市时，自动加载对应的县区列表。这样可以提高用户体验，减少用户的操作。