ajax下拉显示数据 示例代码

1、在网页开发中，我们经常会遇到需要动态加载数据的情况，而使用Ajax技术可以实现无需刷新页面就能获取和展示数据的功能。下拉显示数据是其中一种常见的应用场景，用户通过下拉选择某个选项，然后通过Ajax请求获取对应的数据并展示在页面上。

示例代码如下：

// HTML部分
<select id="selectOption" onchange="loadData()">
  <option value="">请选择选项</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>
<div id="dataContainer"></div>
// JavaScript部分
function loadData() {
  var selectedOption = document.getElementById("selectOption").value;
  var dataContainer = document.getElementById("dataContainer");
  // 创建XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求方式和URL
  xhr.open("GET", "getData.php?option=" + selectedOption, true);
  // 监听请求状态变化
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 请求成功，将返回的数据展示在页面上
      dataContainer.innerHTML = xhr.responseText;
    }
  };
  // 发送请求
  xhr.send();
}

以上示例代码实现了一个下拉选择框，当用户选择某个选项时，会触发`loadData()`函数。该函数通过获取选中的选项值，构建Ajax请求的URL，并发送GET请求到服务器。服务器端根据选项值返回对应的数据，然后通过`xhr.responseText`获取到返回的数据，并将其展示在页面上的`dataContainer`元素中。

通过这种方式，用户可以通过下拉选择不同的选项，动态加载不同的数据，实现了无需刷新页面即可展示不同数据的效果。