首页 前端知识 在html中使用fetch实现GET和POST请求

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

2025-03-02 13:03:04 前端知识 前端哥 682 409 我要收藏

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块中捕获并处理。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/22310.html
标签
评论
发布的文章

如何修改电脑mac地址?

2025-03-03 13:03:33

C 数组:深入解析与应用

2025-03-03 13:03:28

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!