XMLHttpRequest:数据提交

使用XMLHttpRequest提交数据,核心点:

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

例如,服务端提供的注册账号接口:
XMLHttpRequest:数据提交_第1张图片

示例代码:

<!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>

XMLHttpRequest:数据提交_第2张图片

XMLHttpRequest:数据提交_第3张图片

XMLHttpRequest:数据提交_第4张图片

你可能感兴趣的:(XMLHttpRequest)