闪卡应用POST提交表单后页面空白，如何维持页面正常运行？

问题根源 #

当前服务器处理POST请求后调用res.end()返回空响应，浏览器收到空内容会显示空白页；同时表单默认提交行为会刷新页面，导致当前页面状态丢失。

方案1：服务器重定向回首页（简单直接） #

处理完数据后，让服务器重定向到首页（/），浏览器会重新加载index.html，保持页面正常运行。

修改后的服务器代码 #

const bodyParser = require("body-parser");
const fs = require("fs")
const express = require("express"); // 补充缺失的express引入
const app = express();
let urlencodedParser = bodyParser.urlencoded({ extended: false });

app.use(express.json());
app.use(express.static("public"));

app.listen(3000, () => {
    console.log("Server Started");
})

app.post("/", urlencodedParser, (req, res) => {
    console.log(req.body);
    // 示例：将卡片数据写入flashcards.json文件
    fs.readFile("public/flashcards.json", "utf8", (err, data) => {
        let cards = err ? [] : JSON.parse(data);
        cards.push(req.body);
        fs.writeFile("public/flashcards.json", JSON.stringify(cards), (err) => {
            if (err) console.error(err);
            // 数据处理完成后重定向回首页
            res.redirect("/");
        });
    });
})

方案2：AJAX异步提交（无刷新体验更优） #

通过JavaScript阻止表单默认提交行为，用异步请求发送数据，页面不会刷新，还能直接调用AddFlashCard函数添加卡片，无需重新加载页面。

前端代码修改（HTML+JS） #

<form id="form-container" method="post">
    <!-- 原表单内容保持不变 -->
    <div class="justify-container">
        <div class="formItem" id="box1">
            <label for="card-title-input" class="label" id="card-title-label">Card Title:</label>
            <input type="text" name="title" id="card-title-input">
        </div>
        <div class="formItem" id="box2">
            <label for="card-front-input" class="label">Card Front:</label>
            <textarea name="front" id="card-front-input" cols="30" rows="5" maxlength="160"></textarea>    
        </div>
        <div class="formItem" id="box3">
            <label for="card-back-input" class="label">Card Back:</label>
            <textarea name="back" id="card-back-input" cols="30" rows="5" maxlength="160"></textarea>    
        </div>
        <div class="formItem" id="box4">
            <button type="submit" id="submit">Add Card</button>
        </div>
    </div>
</form>

<script>
const form = document.getElementById('form-container');

form.addEventListener('submit', async (e) => {
    // 阻止表单默认刷新行为
    e.preventDefault();
    
    // 收集表单数据
    const formData = new FormData(form);
    const cardData = Object.fromEntries(formData);
    
    try {
        // 发送异步POST请求
        const response = await fetch('/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body: new URLSearchParams(cardData),
        });
        
        if (response.ok) {
            console.log('卡片保存成功');
            // 调用你的AddFlashCard函数添加卡片到页面
            AddFlashCard(cardData);
            // 清空表单输入
            form.reset();
        } else {
            console.error('卡片保存失败');
        }
    } catch (err) {
        console.error('请求出错:', err);
    }
});

// 示例AddFlashCard函数（根据你的实际页面结构调整）
function AddFlashCard(card) {
    const cardElement = document.createElement('div');
    cardElement.className = 'flashcard';
    cardElement.innerHTML = `
        <h3>${card.title}</h3>
        <div class="card-front">${card.front}</div>
        <div class="card-back">${card.back}</div>
    `;
    // 假设页面有一个id为cards-container的容器用于存放卡片
    document.getElementById('cards-container').appendChild(cardElement);
}
</script>

适配AJAX的服务器代码 #

处理完数据后返回成功状态，无需重定向：

const bodyParser = require("body-parser");
const fs = require("fs")
const express = require("express");
const app = express();
let urlencodedParser = bodyParser.urlencoded({ extended: false });

app.use(express.json());
app.use(express.static("public"));

app.listen(3000, () => {
    console.log("Server Started");
})

app.post("/", urlencodedParser, (req, res) => {
    console.log(req.body);
    // 保存数据到JSON文件
    fs.readFile("public/flashcards.json", "utf8", (err, data) => {
        let cards = err ? [] : JSON.parse(data);
        cards.push(req.body);
        fs.writeFile("public/flashcards.json", JSON.stringify(cards), (err) => {
            if (err) {
                console.error(err);
                return res.status(500).send('保存失败');
            }
            // 返回成功响应
            res.status(200).send('保存成功');
        });
    });
})

注意事项 #

• 确保public目录下存在flashcards.json文件，初始内容可以是空数组[]，避免第一次读取报错。
• 方案2的无刷新体验更符合现代Web应用的交互逻辑，推荐优先使用。

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