HTML预订页面无法写入文件问题求助：代码排查

你的代码存在多个核心问题，导致无法实现文件写入功能，以下是具体问题和修复方案：

一、核心错误点 #

1. Java与JavaScript语法混用
   你在浏览器端的JavaScript代码里写了Java的import、FileWriter、System.out.println等语法，浏览器完全不支持Java代码，这是最根本的错误。

2. 前端安全限制
   浏览器出于安全考虑，不允许前端JavaScript直接写入本地文件或服务器文件，必须通过后端接口完成文件操作。

3. 代码语法与逻辑错误

   • 函数定义错误：function WriteToFile缺少括号，正确写法是function WriteToFile()
   • 获取输入值错误：getElementById需要document.前缀，且你获取的是DOM元素对象，不是输入框的value值
   • 按钮点击事件错误：onclick里的WriteToFile没有加括号，不会触发函数执行
   • 重复清空同一输入框（两次清空firstname和lastname）

二、修复方案 #

要实现预订数据写入文件，需要前端收集数据发送给后端，由后端完成文件写入，以下是完整的示例代码：

1. 修改后的前端代码（HTML+JS） #

<label> Firstname </label>
<input type="text" id="firstname" size="15"/> <br> <br>
<label> Lastname: </label>
<input type="text" id="lastname" size="15"/> <br> <br>
<label> number of people: </label>
<input type="number" id="number" size="15"/> <br> <br>
<label>what day would you like:</label><br>
<input type="text" id="day" size="15"/> <br> <br>
<button onclick="submitBooking()">book in</button>
<br>

<script>
async function submitBooking() {
    // 收集输入框的实际值
    const bookingData = {
        firstName: document.getElementById("firstname").value.trim(),
        lastName: document.getElementById("lastname").value.trim(),
        people: document.getElementById("number").value.trim(),
        day: document.getElementById("day").value.trim()
    };

    // 验证必填项
    if (!bookingData.firstName || !bookingData.lastName || !bookingData.people || !bookingData.day) {
        alert("请填写所有预订信息");
        return;
    }

    try {
        // 向后端发送数据
        const response = await fetch('/submit-booking', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(bookingData),
        });

        if (response.ok) {
            alert("预订成功！");
            // 清空所有输入框
            document.getElementById("firstname").value = '';
            document.getElementById("lastname").value = '';
            document.getElementById("number").value = '';
            document.getElementById("day").value = '';
        } else {
            alert("预订失败，请稍后重试");
        }
    } catch (error) {
        console.error("请求错误:", error);
        alert("网络异常，请检查后端服务是否运行");
    }
}
</script>

2. 后端示例（Node.js + Express） #

前端发送的数据需要后端接收并写入文件，这里用Node.js实现简单的后端服务：

1. 先安装Node.js，然后创建项目文件夹，执行以下命令初始化依赖：

npm init -y
npm install express

2. 创建server.js文件，写入以下代码：

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

// 解析JSON格式的请求体
app.use(express.json());
// 托管前端静态文件（把上述前端HTML放入项目下的public文件夹）
app.use(express.static('public'));

// 处理预订提交请求
app.post('/submit-booking', (req, res) => {
    const { firstName, lastName, people, day } = req.body;
    // 将数据格式化为带时间戳的CSV格式，方便后续查看
    const logContent = `${new Date().toLocaleString()},${firstName},${lastName},${people},${day}\n`;

    // 追加写入到book.txt文件
    fs.appendFile(path.join(__dirname, 'book.txt'), logContent, (err) => {
        if (err) {
            console.error("写入文件失败:", err);
            return res.status(500).send("保存失败");
        }
        res.status(200).send("保存成功");
    });
});

// 启动服务，监听3000端口
app.listen(3000, () => {
    console.log("服务已启动，访问 http://localhost:3000 测试");
});

3. 运行步骤 #

• 创建public文件夹，把修改后的前端HTML文件放入其中
• 执行node server.js启动后端服务
• 打开浏览器访问http://localhost:3000，填写信息后点击按钮，数据会写入到项目根目录的book.txt文件中

内容的提问来源于stack exchange，提问作者MR SSD