ajax 城市关联,示例代码

Ajax城市关联是一种网页开发技术，通过使用Ajax技术，实现在一个下拉菜单中选择一个城市后，另一个下拉菜单会自动显示与所选城市相关的城市列表。这种技术可以提供更好的用户体验，减少用户的操作次数。

我们需要在HTML中定义两个下拉菜单，一个用于选择省份，另一个用于显示与所选省份相关的城市列表。然后，我们需要使用JavaScript编写代码来实现Ajax城市关联功能。

示例代码如下：

HTML部分：

<select id="province" onchange="getCity()">
  <option value="">请选择省份</option>
  <option value="北京">北京</option>
  <option value="上海">上海</option>
  <option value="广东">广东</option>
</select>
<select id="city"></select>

JavaScript部分：

function getCity() {
  var province = document.getElementById('province').value;
  var citySelect = document.getElementById('city');
  citySelect.innerHTML = ''; // 清空城市列表
  if (province === '') {
    return;
  }
  // 发送Ajax请求获取与所选省份相关的城市列表
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      var cities = JSON.parse(xhr.responseText);
      for (var i = 0; i < cities.length; i++) {
        var option = document.createElement('option');
        option.value = cities[i];
        option.innerHTML = cities[i];
        citySelect.appendChild(option);
      }
    }
  };
  xhr.open('GET', 'get_cities.php?province=' + province, true);
  xhr.send();
}

在上面的示例代码中，我们首先通过`getElementById`方法获取省份下拉菜单和城市下拉菜单的DOM元素。然后，我们在省份下拉菜单的`onchange`事件中调用`getCity`函数。

在`getCity`函数中，我们首先获取所选省份的值，然后清空城市下拉菜单的选项。如果所选省份为空，则直接返回。

接下来，我们使用`XMLHttpRequest`对象发送Ajax请求。在请求成功后，我们通过`JSON.parse`方法将返回的城市列表转换为JavaScript对象。然后，我们使用`createElement`方法创建城市下拉菜单的选项，并将它们添加到城市下拉菜单中。

我们通过`open`方法指定请求的URL和请求的方法（这里使用GET方法），并通过`send`方法发送请求。

通过以上的代码，我们就实现了一个简单的Ajax城市关联功能。当用户选择一个省份时，城市下拉菜单会自动显示与所选省份相关的城市列表。