如何通过HTML表单向现有JSON文件追加JSON对象数据？

浏览器端JavaScript受安全限制，无法直接写入本地文件，因此分两种场景给出可行方案：

方案1：纯前端（读取原文件→添加数据→下载新文件） #

无需后端支持，通过用户上传原JSON文件，填写表单后生成包含新数据的JSON文件供下载：

HTML代码 #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加单词释义</title>
</head>
<body>
    <!-- 上传原JSON文件 -->
    <div>
        <label>上传原WordMeanings.json文件:</label>
        <input type="file" id="jsonFile" accept=".json">
    </div>

    <!-- 输入表单 -->
    <div>
        <label>Bangla:</label>
        <input type="text" id="banglaInput" required>
    </div>
    <div>
        <label>Example:</label>
        <input type="text" id="exampleInput" required>
    </div>
    <div>
        <label>English:</label>
        <input type="text" id="englishInput" required>
    </div>
    <button onclick="addMeaning()">添加并下载新文件</button>

    <script>
        let originalData = null;

        // 读取上传的原JSON文件
        document.getElementById('jsonFile').addEventListener('change', function(e) {
            const file = e.target.files[0];
            if (!file) return;

            const reader = new FileReader();
            reader.onload = function(event) {
                try {
                    originalData = JSON.parse(event.target.result);
                    alert('原文件读取成功');
                } catch (err) {
                    alert('文件格式错误，请上传正确的JSON文件');
                }
            };
            reader.readAsText(file);
        });

        // 添加新释义并生成下载
        function addMeaning() {
            if (!originalData) {
                alert('请先上传原JSON文件');
                return;
            }

            // 获取表单输入值
            const bangla = document.getElementById('banglaInput').value.trim();
            const example = document.getElementById('exampleInput').value.trim();
            const english = document.getElementById('englishInput').value.trim();

            if (!bangla || !example || !english) {
                alert('请填写所有字段');
                return;
            }

            // 创建新释义对象
            const newMeaning = {
                bangla: bangla,
                example: example,
                english: english
            };

            // 添加到数组中
            originalData.WordMeanings.push(newMeaning);

            // 转换为格式化的JSON字符串
            const updatedJson = JSON.stringify(originalData, null, 2);

            // 创建下载链接
            const blob = new Blob([updatedJson], { type: 'application/json' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'WordMeanings_updated.json';
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);

            // 清空输入框
            document.getElementById('banglaInput').value = '';
            document.getElementById('exampleInput').value = '';
            document.getElementById('englishInput').value = '';
        }
    </script>
</body>
</html>

使用说明 #

1. 打开该HTML文件，点击「上传原WordMeanings.json文件」选择本地的JSON文件
2. 在三个输入框中填写内容，点击「添加并下载新文件」
3. 下载的新文件即为更新后的JSON，替换本地原文件即可，支持多次重复操作

方案2：Node.js后端配合（自动写入本地文件） #

如果要实现点击提交直接修改本地的WordMeanings.json，需要搭建简单的后端服务：

步骤1：初始化项目并安装依赖 #

在项目文件夹下打开终端，执行：

npm init -y
npm install express cors body-parser

步骤2：创建后端服务文件（server.js） #

const express = require('express');
const cors = require('cors');
const bodyParser = require('body-parser');
const fs = require('fs');
const path = require('path');

const app = express();
const PORT = 3000;

// 配置中间件
app.use(cors());
app.use(bodyParser.json());

// 定义JSON文件路径
const jsonFilePath = path.join(__dirname, 'WordMeanings.json');

// 处理添加请求
app.post('/add-meaning', (req, res) => {
    try {
        // 读取原文件内容
        const rawData = fs.readFileSync(jsonFilePath, 'utf8');
        const data = JSON.parse(rawData);

        // 获取前端发送的新数据
        const { bangla, example, english } = req.body;
        if (!bangla || !example || !english) {
            return res.status(400).json({ success: false, message: '所有字段不能为空' });
        }

        // 添加新释义到数组
        data.WordMeanings.push({ bangla, example, english });

        // 写入更新后的内容到文件
        fs.writeFileSync(jsonFilePath, JSON.stringify(data, null, 2), 'utf8');

        res.json({ success: true, message: '释义添加成功' });
    } catch (err) {
        res.status(500).json({ success: false, message: '文件操作失败', error: err.message });
    }
});

// 启动服务
app.listen(PORT, () => {
    console.log(`服务运行在 http://localhost:${PORT}`);
});

步骤3：前端HTML文件（index.html） #

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加单词释义</title>
</head>
<body>
    <div>
        <label>Bangla:</label>
        <input type="text" id="banglaInput" required>
    </div>
    <div>
        <label>Example:</label>
        <input type="text" id="exampleInput" required>
    </div>
    <div>
        <label>English:</label>
        <input type="text" id="englishInput" required>
    </div>
    <button onclick="addMeaning()">添加释义</button>

    <script>
        async function addMeaning() {
            const bangla = document.getElementById('banglaInput').value.trim();
            const example = document.getElementById('exampleInput').value.trim();
            const english = document.getElementById('englishInput').value.trim();

            if (!bangla || !example || !english) {
                alert('请填写所有字段');
                return;
            }

            try {
                const response = await fetch('http://localhost:3000/add-meaning', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({ bangla, example, english })
                });

                const result = await response.json();
                alert(result.message);

                if (result.success) {
                    // 清空输入框
                    document.getElementById('banglaInput').value = '';
                    document.getElementById('exampleInput').value = '';
                    document.getElementById('englishInput').value = '';
                }
            } catch (err) {
                alert('请求失败，请检查后端服务是否运行');
            }
        }
    </script>
</body>
</html>

使用说明 #

1. 将本地的WordMeanings.json放在项目文件夹根目录
2. 终端执行 node server.js 启动后端服务
3. 打开前端HTML文件，填写内容后点击「添加释义」，即可直接将数据写入本地的JSON文件，支持多次添加

内容的提问来源于stack exchange，提问作者Najmul Hasan