Fetch API in JavaScript将表单数据保存到JSON或文本文件中

Fetch API 是 JavaScript 中用于发起网络请求的现代接口，它提供了一种简单、灵活的方式来与服务器进行通信。使用 Fetch API，你可以将表单数据发送到服务器，并在那里保存为 JSON 或文本文件。

基础概念

Fetch API 使用 Promise 来处理异步操作，它返回一个 Promise 对象，该对象解析为一个 Response 对象。你可以使用这个 Response 对象来读取响应的数据。

保存表单数据为 JSON 或文本文件

要将表单数据保存为 JSON 或文本文件，你需要先将表单数据序列化为 JSON 字符串，然后通过 Fetch API 发送到服务器。服务器端接收到数据后，可以将其保存为 JSON 或文本文件。

示例代码

以下是一个简单的示例，展示如何使用 Fetch API 将表单数据发送到服务器并保存为 JSON 文件：

// 假设有一个 HTML 表单
// <form id="myForm">
//   <input type="text" name="username" />
//   <input type="password" name="password" />
//   <button type="submit">Submit</button>
// </form>

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault(); // 阻止表单默认提交行为

  const formData = new FormData(this);
  const data = {};
  formData.forEach((value, key) => {
    data[key] = value;
  });

  // 将表单数据序列化为 JSON 字符串
  const jsonData = JSON.stringify(data);

  // 使用 Fetch API 发送 POST 请求到服务器
  fetch('/save-json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: jsonData
  })
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });
});

在服务器端，你需要设置一个路由来处理这个 POST 请求，并将接收到的 JSON 数据保存为文件。以下是一个使用 Node.js 和 Express 的示例：

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

app.use(express.json());

app.post('/save-json', (req, res) => {
  const jsonData = req.body;

  // 将 JSON 数据保存到文件
  fs.writeFile('data.json', JSON.stringify(jsonData, null, 2), (err) => {
    if (err) {
      return res.status(500).send('Error saving file');
    }
    res.send('File saved successfully');
  });
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});