ajax选择城市-ajax设置：示例代码

Ajax（Asynchronous JavaScript and XML）是一种用于在网页上进行异步数据交互的技术。它可以在不刷新整个网页的情况下，通过与服务器进行数据交互，实现动态更新网页内容的效果。

在选择城市的功能中，我们可以使用Ajax来实现动态加载城市列表的功能。当用户选择了一个省份时，我们可以通过Ajax向服务器发送请求，获取该省份下的城市列表，并将其动态显示在页面上。

我们需要在页面中创建一个用于显示城市列表的容器，例如一个下拉列表或者一个div元素。然后，我们需要通过JavaScript来监听省份选择的事件，并在事件发生时触发Ajax请求。

示例代码如下：

HTML部分：

<select id="province">
  <option value="1">省份1</option>
  <option value="2">省份2</option>
  <option value="3">省份3</option>
</select>
<select id="city"></select>

JavaScript部分：

// 监听省份选择事件
document.getElementById("province").addEventListener("change", function() {
  // 获取选中的省份值
  var provinceId = this.value;
  // 创建一个Ajax对象
  var xhr = new XMLHttpRequest();
  // 设置请求的URL
  xhr.open("GET", "/getCityList?provinceId=" + provinceId, true);
  // 设置请求完成后的回调函数
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 获取服务器返回的城市列表数据
      var cityList = JSON.parse(xhr.responseText);
      // 清空城市列表容器
      var cityContainer = document.getElementById("city");
      cityContainer.innerHTML = "";
      // 动态添加城市选项
      cityList.forEach(function(city) {
        var option = document.createElement("option");
        option.value = city.id;
        option.textContent = city.name;
        cityContainer.appendChild(option);
      });
    }
  };
  // 发送Ajax请求
  xhr.send();
});

在上面的示例代码中，我们首先通过`document.getElementById`方法获取到省份选择的下拉列表元素，并通过`addEventListener`方法为其绑定了一个`change`事件的监听器。当用户选择了一个省份时，该事件监听器会被触发。

在事件监听器中，我们首先通过`this.value`获取到用户选择的省份值。然后，我们创建了一个`XMLHttpRequest`对象，并通过`open`方法设置了请求的URL，其中包含了选中的省份值作为参数。

接着，我们通过`onreadystatechange`事件来监听Ajax请求的状态变化。当请求完成且响应状态为200时，我们首先通过`JSON.parse`方法解析服务器返回的城市列表数据。然后，我们清空了城市列表容器，并通过`forEach`方法动态创建了城市选项，并将其添加到城市列表容器中。

我们通过`send`方法发送Ajax请求，从而触发与服务器的数据交互。当服务器返回数据后，我们就可以动态更新页面上的城市列表了。