XMLHttpRequest：数据提交

听海边涛声

已于 2024-07-13 10:00:18 修改

阅读量169

点赞数 2

文章标签： XMLHttpRequest

于 2024-07-13 09:56:10 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140394256

版权

使用XMLHttpRequest提交数据，核心点：

请求头设置Content-Type: application/json，用XMLHttpRequest的setRequestHeader方法设置
请求体携带JSON字符串，在XMLHttpRequest的send方法中携带

例如，服务端提供的注册账号接口：
在这里插入图片描述

示例代码：

<!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>
  <button class="reg-btn">注册用户</button>
  <script>
    /**
     * 目标：使用xhr进行数据提交-完成注册功能
    */
    document.querySelector('.reg-btn').addEventListener('click', () => {
      const xhr = new XMLHttpRequest()
      xhr.open('post', 'https://hmajax.itheima.net/api/register')
      xhr.addEventListener('loadend', () => {
        console.log(xhr.response)
      })

      // 设置请求头，告诉服务器内容类型，使用的是JSON字符串
      xhr.setRequestHeader('Content-Type', 'application/json')
      // 准备提交的数据
      const userObj = {
        username: '听海边涛声听海边涛声',
        password: '123456'
      }
      const userStr = JSON.stringify(userObj)
      // 设置请求体，发起请求
      xhr.send(userStr)
    })
  </script>
</body>

</html>