在html中使用fetch实现GET和POST请求

最新推荐文章于 2025-05-29 01:24:06 发布

易德研发

最新推荐文章于 2025-05-29 01:24:06 发布

阅读量3.8k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： web 文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/easydvlp/article/details/143948712

web 专栏收录该内容

2 篇文章

订阅专栏

1.fetch功能说明

fetch是一个现代的 JavaScript API，用于在浏览器中进行网络请求。它提供了一种更灵活、更强大的方式来获取资源，相比于传统的XMLHttpRequest（XHR），fetch具有更简洁的语法和基于 Promise 的异步处理机制。
基本语法：
fetch()函数接受一个必需的参数，即要获取资源的URL，例如：

fetch('https://example.com/api/data');

它返回一个Promise对象，这个Promise会在请求响应成功或失败时被解决或被拒绝。

可以给fetch函数传递第二个可选参数，这是一个配置对象，用于配置请求的各种参数，如请求方法（method）、请求头（headers）、请求体（body）等，例如：

fetch('https://example.com/api/submit', {
    method: 'POST',
    headers: {
        'Content - Type': 'application/json'
    },
    body: JSON.stringify({
        key: 'value'
    })
});

2.实现GET请求示例

GET是fetch默认的请求方法。用于从服务器获取数据，通常用于查询操作。例如，获取用户列表、文章内容等。它不会对服务器上的数据进行修改，请求的数据通过URL传递。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch GET Example</title>
</head>

<body>
  <button onclick="sendGetRequest()">发送GET请求</button>

  <script>
    function sendGetRequest() {
      // 要请求的URL
      const url = 'https://example.com/api/data';

      // 使用fetch发送GET请求
      fetch(url)
      .then(response => response.json())
      .then(data => {
          console.log('获取到的数据:', data);
          // 在这里可以对获取到的数据进行进一步处理，比如更新页面内容等
        })
      .catch(error => {
          console.error('请求出错:', error);
        });
    }
  </script>
</body>

</html>

在上述示例中：
1.首先点击页面上的按钮时，会触发sendGetRequest函数。
2.函数内部使用fetch函数并传入要请求的 URL（这里假设是https://example.com/api/data，实际使用时需替换为真实的 API 地址）来发送 GET 请求。
3.fetch返回一个Promise，通过.then方法处理响应。首先将响应解析为 JSON 格式（如果响应数据是 JSON 格式的话），然后可以在后续的.then中对获取到的数据进行处理，比如打印到控制台或者更新页面元素等。如果请求过程中出现错误，会在.catch块中捕获并打印错误信息。

3.实现POST请求示例

POST用于向服务器提交数据，通常用于创建新的资源。比如在用户注册时，将用户信息发送给服务器创建新用户账号。除了POST之外，还可以使用PUT（用于更新资源的全部内容）、PATCH（用于更新资源的部分内容）、DELETE（用于删除资源）等请求方法。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Fetch POST Example</title>
</head>

<body>
  <button onclick="sendPostRequest()">发送POST请求</button>

  <script>
    function sendPostRequest() {
      // 要请求的URL
      const url = 'https://example.com/api/submit';
      // 要发送的数据，这里以一个简单的对象为例
      const data = {
        name: 'John',
        age: 30
      };

      // 设置请求头，表明发送的数据是JSON格式
      const headers = {
        'Content-Type': 'application/json'
      };

      // 使用fetch发送POST请求
      fetch(url, {
        method: 'POST',
        headers: headers,
        body: JSON.stringify(data)
      })
      .then(response => response.json())
      .then(data => {
          console.log('服务器返回的数据:', data);
          // 同样可以在这里对返回数据进行进一步处理
        })
      .catch(error => {
          console.error('POST请求出错:', error);
        });
    }
  </script>
</body>

</html>

在上述POST 请求示例中：
1.首先点击按钮触发sendPostRequest函数。
2.定义了要请求的 URL（假设为https://example.com/api/submit，需替换为真实地址）以及要发送的数据对象data。
3.设置了请求头headers，指定发送的数据是 JSON 格式，因为我们要发送的body数据会被转换为 JSON 字符串。
4.使用fetch发送 POST 请求时，传入了额外的配置对象，其中包括请求方法method设为POST，请求头headers以及要发送的body数据（通过JSON.stringify将对象转换为字符串）。
5.后续处理响应的方式与 GET 请求类似，先将响应解析为 JSON 格式，然后根据需要对返回的数据进行处理，若出现错误则在.catch块中捕获并处理。