Fetch API in JavaScript将表单数据保存到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);
  });
});

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');
});