如何在Ajax中使用下拉菜单自动填写表单？

<select id="dropdown">
  <option value="">请选择</option>
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<form id="myForm">
  <input type="text" id="input1" placeholder="自动填写的字段1">
  <input type="text" id="input2" placeholder="自动填写的字段2">
  <!-- 其他表单字段 -->
</form>

// 获取下拉菜单和表单元素
var dropdown = document.getElementById("dropdown");
var form = document.getElementById("myForm");
var input1 = document.getElementById("input1");
var input2 = document.getElementById("input2");

// 监听下拉菜单的变化事件
dropdown.addEventListener("change", function() {
  var selectedValue = dropdown.value;

  // 发送Ajax请求
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "/getData?value=" + selectedValue, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      var response = JSON.parse(xhr.responseText);

      // 填充表单字段
      input1.value = response.field1;
      input2.value = response.field2;
      // 其他表单字段的填充

      // 可以根据需要进行其他操作
    }
  };
  xhr.send();
});