基于AJAX的级联下拉菜单

级联下拉菜单指的是在选择一个选项后，下一个选项的内容会随之改变。基于 AJAX 技术实现级联下拉菜单，可以提升用户体验，减少页面刷新次数，提高页面的性能。

以下是一个简单的基于 AJAX 的级联下拉菜单实现步骤：

1. 在 HTML 页面中，使用 select 标签创建两个下拉菜单，分别为省份和城市。

<select id="province">
  <option>--请选择省份--</option>
  <option value="1">北京</option>
  <option value="2">上海</option>
  <option value="3">广东</option>
</select>

<select id="city">
  <option>--请选择城市--</option>
</select>

2. 使用 JavaScript 绑定省份下拉菜单的 onchange 事件，当省份发生变化时，使用 AJAX 向服务器请求该省份的城市列表。

document.getElementById("province").onchange = function() {
  var provinceId = this.value;
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      var cities = JSON.parse(xhr.responseText);
      var citySelect = document.getElementById("city");
      citySelect.innerHTML = "<option>--请选择城市--</option>";
      for (var i = 0; i < cities.length; i++) {
        var option = document.createElement("option");
        option.value = cities[i].id;
        option.innerHTML = cities[i].name;
        citySelect.appendChild(option);
      }
    }
  };
  xhr.open("GET", "/get_cities?province_id=" + provinceId, true);
  xhr.send();
};

3. 在服务器端编写一个 API，接收省份 ID 作为参数，返回该省份的城市列表。

@app.route('/get_cities')
def get_cities():
    province_id = request.args.get('province_id')
    cities = fetch_cities_by_province(province_id)
    return json.dumps(cities)

以上就是一个简单的基于 AJAX 的级联下拉菜单实现步骤。需要注意的是，在实际应用中，需要根据具体的需求进行修改和优化。