使用XMLHttpRequest发送带查询参数的 GET 请求并动态展示数据

目录

目标

步骤说明

完整代码:

[HTML 部分](#HTML 部分)

代码解析:

总结:


在这个示例中,我们展示了如何使用 XMLHttpRequest 进行带有查询参数的 AJAX 请求。目标是通过 GET 请求向服务器传递参数,并获取与该参数相关的数据。以下是完整的代码和详细的讲解:

目标

  • 使用 XMLHttpRequest 对象与服务器进行异步通信,并携带查询参数。
  • 向服务器请求某个省的城市列表,展示广东省下属的所有城市。

步骤说明

  1. 创建 XMLHttpRequest 对象 :首先我们创建了一个 XMLHttpRequest 对象,负责与服务器进行通信。
  2. 配置请求 :使用 xhr.open() 方法配置请求,设置请求类型为 GET,并且添加查询参数 pname=广东省,请求 URL 是 http://hmajax.itheima.net/api/city?pname=广东省
  3. 监听 loadend 事件 :当请求完成后,监听 loadend 事件,获取服务器返回的数据。
  4. 解析 JSON 数据 :通过 xhr.response 获取响应内容,将其解析为 JSON 格式,并提取城市列表。
  5. 动态更新页面 :使用 innerHTML 将城市列表显示到 HTML 页面中的 p 标签中。

完整代码:

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>XMLHttpRequest_查询参数</title>
</head>

<body>
  <p class="city-p"></p>
  <script>
    /**
     * 目标:使用XHR携带查询参数,展示某个省下属的城市列表
    */
   const xhr = new XMLHttpRequest()
   // 这里是 GET 请求,并带有查询参数 pname=广东省
   xhr.open('GET','http://hmajax.itheima.net/api/city?pname=广东省')
   // 监听请求完成后的事件
   xhr.addEventListener('loadend', () => {
    // 将响应数据解析为 JSON 格式
    const data = JSON.parse(xhr.response)
    // 将城市列表显示到页面
    document.querySelector('.city-p').innerHTML = data.list.join('<br>')
   })
   // 发送请求
   xhr.send()
  </script>
</body>

</html>

代码解析:

  • XMLHttpRequest 对象const xhr = new XMLHttpRequest() 创建了一个新的 XMLHttpRequest 对象,负责与服务器通信。
  • open() 方法xhr.open('GET', 'http://hmajax.itheima.net/api/city?pname=广东省') 设定请求的 HTTP 方法为 GET,请求的 URL 为 'http://hmajax.itheima.net/api/city?pname=广东省'。这里的 pname=广东省 是我们传递给服务器的查询参数。
  • loadend 事件监听xhr.addEventListener('loadend', () => { ... }) 监听请求结束事件,并在请求结束后执行回调函数。该函数将返回的响应(JSON 格式数据)解析并处理。
  • JSON 解析const data = JSON.parse(xhr.response) 解析从服务器返回的 JSON 数据。
  • 动态更新页面document.querySelector('.city-p').innerHTML = data.list.join('<br>') 使用 innerHTML 将城市列表渲染到页面上,以 <br> 标签作为分隔符,使每个城市显示在新的一行。

总结:

该示例展示了如何使用 XMLHttpRequest 向服务器发送带有查询参数的请求,并展示如何在获取响应后动态地将数据渲染到页面中。在实际开发中,类似的技术可以用于与后端 API 交互,动态加载数据。

通过这个示例,你可以更好地理解如何使用 XMLHttpRequest 携带查询参数以及如何处理服务器返回的 JSON 数据。这种基本的 AJAX 技术对前端开发非常重要,尤其在需要与服务器进行异步通信时。

相关推荐
无我Code2 分钟前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟4 分钟前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light20 分钟前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子23 分钟前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空000023 分钟前
Vue组件通信方式详解
前端·面试
呆呆的心23 分钟前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
百锦再24 分钟前
重新学习Vue中的按键监听和鼠标监听
javascript·vue.js·vue·计算机外设·click·up·down
susnm28 分钟前
Dioxus 与数据库协作
前端·rust
优雅永不过时_v32 分钟前
基于vite适用于 vue和 react 的Three.js低代码与Ai结合编辑器
前端·javascript
小皮侠34 分钟前
nginx的使用
java·运维·服务器·前端·git·nginx·github