3

在网页前端与后端进行通信时，通常通过发送HTTP请求来调用后端的API接口。前端可以通过JavaScript等语言来发起请求，与后端进行数据交互，常见的请求方式包括 GET 和 POST。

前端请求后端API的流程：

前端发起请求：前端通过用户操作或页面加载等事件，向后端发起请求。
后端处理请求：后端服务器接收到请求后，根据API的逻辑处理请求，通常会与数据库或其他服务进行交互。
后端返回响应：后端处理完请求后，将结果以JSON等格式返回给前端。
前端处理响应：前端接收到后端的响应后，可以根据数据进行页面更新或其他逻辑操作。

前端请求后端API的例子

使用JavaScript的`fetch` API：

html

<!DOCTYPE html>
<html>
<head>
  <title>前端请求后端API</title>
  <script>
    // 定义一个异步函数，用于向后端API发起请求
    async function fetchData() {
      // 发起GET请求到后端API
      const response = await fetch('https://example.com/api/data');
      
      // 检查响应是否成功
      if (response.ok) {
        // 将响应的JSON数据转换为JavaScript对象
        const data = await response.json();
        // 输出数据到控制台或更新网页内容
        console.log(data);
        document.getElementById('result').innerText = JSON.stringify(data);
      } else {
        // 如果请求失败，处理错误
        console.error('请求失败', response.status);
      }
    }

    // 发起POST请求
    async function postData() {
      const payload = {
        name: '张三',
        age: 25
      };

      const response = await fetch('https://example.com/api/submit', {
        method: 'POST', // 请求方法
        headers: {
          'Content-Type': 'application/json' // 请求头，指定内容类型为JSON
        },
        body: JSON.stringify(payload) // 请求体，转化为JSON格式
      });

      if (response.ok) {
        const result = await response.json();
        console.log('POST请求成功：', result);
        document.getElementById('result').innerText = JSON.stringify(result);
      } else {
        console.error('POST请求失败', response.status);
      }
    }
  </script>
</head>
<body>
  <h1>前端请求后端API的示例</h1>
  <button onclick="fetchData()">发起GET请求</button>
  <button onclick="postData()">发起POST请求</button>
  <p>响应结果：<span id="result"></span></p>
</body>
</html>

解释：

GET请求:
- 使用 fetch('https://example.com/api/data') 发起GET请求，目标是从服务器获取数据。
- response.json() 用来将服务器响应的JSON数据解析为JavaScript对象。
- 成功后会将数据输出到页面的 <span> 标签中。
POST请求:
- fetch('https://example.com/api/submit', {...}) 发起POST请求，向服务器提交数据。
- method: 'POST' 指定请求方法为POST。
- headers 中的 Content-Type 为 application/json，表明发送的数据是JSON格式。
- body: JSON.stringify(payload) 将JavaScript对象转换为JSON字符串发送给后端。

后端示例（Node.js + Express）：

javascript

const express = require('express');
const app = express();

app.use(express.json()); // 解析JSON请求体

// GET请求处理
app.get('/api/data', (req, res) => {
  const data = { message: '这是从后端获取的数据' };
  res.json(data); // 发送JSON格式的响应
});

// POST请求处理
app.post('/api/submit', (req, res) => {
  const { name, age } = req.body;
  res.json({ message: `收到POST请求，姓名：${name}，年龄：${age}` });
});

// 监听端口
app.listen(3000, () => {
  console.log('服务器在端口3000运行');
});

总结

GET 请求用于从后端获取数据。
POST 请求用于向后端发送数据。
前端通过 fetch API 发起请求，后端通过API接口处理请求并返回响应。

3 ​

前端请求后端API的流程： ​

前端请求后端API的例子 ​

使用JavaScript的fetch API： ​

解释： ​

后端示例（Node.js + Express）： ​

总结 ​

3

前端请求后端API的流程：

前端请求后端API的例子

使用JavaScript的`fetch` API：

解释：

后端示例（Node.js + Express）：

总结