（案例）如何使用 XMLHttpRequest 发送带查询参数的请求查询地区

[详细介绍：如何使用 XMLHttpRequest 发送带查询参数的请求查询地区](#详细介绍：如何使用 XMLHttpRequest 发送带查询参数的请求查询地区)

[1. HTML 部分：页面结构和表单](#1. HTML 部分：页面结构和表单)

[2. JavaScript 部分：处理查询和更新地区列表](#2. JavaScript 部分：处理查询和更新地区列表)

[3. 关键部分解释：](#3. 关键部分解释：)

[4. 总结：](#4. 总结：)

在前端开发中，XMLHttpRequest 是一个非常常用的对象，它允许我们向服务器发送请求并接收响应，从而在页面不重新加载的情况下动态更新网页内容。下面将通过一个案例展示如何使用 XMLHttpRequest 配合查询参数来查询地区列表。这个例子中，我们将根据用户输入的省份和城市名称，从服务器获取该城市的地区列表，并显示在页面上。

1. HTML 部分：页面结构和表单

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例_地区查询</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <style>
    :root {
      font-size: 15px;
    }

    body {
      padding-top: 15px;
    }
  </style>
</head>
<body>
  <div class="container">
    <form id="editForm" class="row">
      <!-- 输入省份名字 -->
      <div class="mb-3 col">
        <label class="form-label">省份名字</label>
        <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
      </div>
      <!-- 输入城市名字 -->
      <div class="mb-3 col">
        <label class="form-label">城市名字</label>
        <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
      </div>
    </form>
    <button type="button" class="btn btn-primary sel-btn">查询</button>
    <br><br>
    <p>地区列表: </p>
    <ul class="list-group">
      <!-- 示例地区 -->
      <li class="list-group-item">东城区</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */
  </script>
</body>
</html>

解析：

form 用于接收用户输入的省份和城市名称。
查询 按钮触发查询请求。
结果将显示在一个无序列表 <ul class="list-group"> 中。

2. JavaScript 部分：处理查询和更新地区列表

在用户点击查询按钮后，我们将获取输入的省份和城市名称，构建查询参数并发送 XMLHttpRequest 请求。

javascript 复制代码

document.querySelector('.sel-btn').addEventListener('click', () => {
  const pname = document.querySelector('.province').value;  // 获取输入的省份名
  const cname = document.querySelector('.city').value;      // 获取输入的城市名

  // 使用 URLSearchParams 构造查询字符串
  const paramsObj = new URLSearchParams({
    pname,
    cname
  });

  const queryString = paramsObj.toString();  // 将对象转换为查询字符串
  console.log(queryString);

  // 创建 XMLHttpRequest 对象
  const xhr = new XMLHttpRequest();
  xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`);  // 拼接查询字符串

  xhr.addEventListener('loadend', () => {
    // 请求完成后的回调函数
    const data = JSON.parse(xhr.response);  // 解析响应数据
    console.log(data);

    // 根据返回的数据构建列表项并显示
    const htmlStr = data.list.map(item => {
      return `<li class="list-group-item">${item}</li>`;  // 构建每个地区的列表项
    }).join('');

    // 将构建的列表项插入到页面
    document.querySelector('.list-group').innerHTML = htmlStr;
  });

  xhr.send();  // 发送请求
});

解析：

我们首先获取用户输入的省份（pname）和城市（cname）名称。
使用 URLSearchParams 将这两个输入值转换为查询字符串。
创建一个 XMLHttpRequest 对象并使用 GET 方法发送请求到服务器。
在 loadend 事件中，我们解析服务器返回的数据，并动态构建列表项显示地区名称。

3. 关键部分解释：

XMLHttpRequest 对象：用于发送 HTTP 请求并接收响应数据。它允许页面与服务器进行异步通信，而无需刷新页面。
URLSearchParams ：这是一个非常方便的 API，用于处理 URL 查询字符串。我们可以将一个对象（如 {pname, cname}）转化为查询参数。
xhr.send()：实际发送请求的方法，发送的是 GET 请求。
xhr.addEventListener('loadend', callback)：监听请求完成后的回调函数，处理返回的数据并更新页面。

4. 总结：

这个案例展示了如何使用 XMLHttpRequest 搭配查询字符串来进行动态查询。
用户输入省份和城市名称后，点击查询按钮触发请求，返回的地区列表将被动态渲染到页面。
通过 XMLHttpRequest 的异步请求，我们能够高效地与服务器交互并更新页面，而不需要刷新整个页面。

完整代码：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>案例_地区查询</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
  <style>
    :root {
      font-size: 15px;
    }

    body {
      padding-top: 15px;
    }
  </style>
</head>
<body>
  <div class="container">
    <form id="editForm" class="row">
      <!-- 输入省份名字 -->
      <div class="mb-3 col">
        <label class="form-label">省份名字</label>
        <input type="text" value="北京" name="province" class="form-control province" placeholder="请输入省份名称" />
      </div>
      <!-- 输入城市名字 -->
      <div class="mb-3 col">
        <label class="form-label">城市名字</label>
        <input type="text" value="北京市" name="city" class="form-control city" placeholder="请输入城市名称" />
      </div>
    </form>
    <button type="button" class="btn btn-primary sel-btn">查询</button>
    <br><br>
    <p>地区列表: </p>
    <ul class="list-group">
      <!-- 示例地区 -->
      <li class="list-group-item">东城区</li>
    </ul>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script>
    /**
     * 目标: 根据省份和城市名字, 查询对应的地区列表
    */

    document.querySelector('.sel-btn').addEventListener('click', () => {
      const pname = document.querySelector('.province').value;  // 获取输入的省份名
      const cname = document.querySelector('.city').value;      // 获取输入的城市名

      // 使用 URLSearchParams 构造查询字符串
      const paramsObj = new URLSearchParams({
        pname,
        cname
      });

      const queryString = paramsObj.toString();  // 将对象转换为查询字符串
      console.log(queryString);

      // 创建 XMLHttpRequest 对象
      const xhr = new XMLHttpRequest();
      xhr.open('GET', `http://hmajax.itheima.net/api/area?${queryString}`);  // 拼接查询字符串

      xhr.addEventListener('loadend', () => {
        // 请求完成后的回调函数
        const data = JSON.parse(xhr.response);  // 解析响应数据
        console.log(data);

        // 根据返回的数据构建列表项并显示
        const htmlStr = data.list.map(item => {
          return `<li class="list-group-item">${item}</li>`;  // 构建每个地区的列表项
        }).join('');

        // 将构建的列表项插入到页面
        document.querySelector('.list-group').innerHTML = htmlStr;
      });

      xhr.send();  // 发送请求
    });
  </script>
</body>
</html>

这个完整的代码示例可以帮助你了解如何使用 XMLHttpRequest 发送带查询参数的请求，并将结果动态展示到网页上。