如何修改Express.js计算器代码，实现计算结果在原页面显示？

以下提供两种实现方案，可根据需求选择：

方案一：后端渲染返回结果到原页面 #

通过修改后端路由，将计算结果传递给EJS模板，在原页面中渲染展示结果：

1. 修改app.js的POST路由：

const express= require("express");
const bodyParser=require("body-parser");
const app= express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static("public"))

app.get("/",function(req,res){
    res.render('home');
});

app.get("/add",function(req,res){
    res.render('add');
});

app.post("/add",function(req,res){
    var num1=Number(req.body.n1);
    var num2=Number(req.body.n2);
    var result=num1+num2;
    // 将计算结果传入模板，渲染原页面
    res.render('add', { result: result });
});

2. 修改add.ejs，添加结果展示区域：

<!DOCTYPE html>
<html dir="rtl">
    <head>
        <title>calc add</title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
        <form action="/add" method ="post">
            <input type="text" class="input" name="n1" placeholder="enter x1"><br>
            <br>
            <input type="text" class="input" name="n2" placeholder="enter x2"><br>
            <br>
            <button type="submit" class="submit" name="Submit">calc!</button>
        </form>
        <!-- 结果展示区域：仅当存在计算结果时显示 -->
        <% if (typeof result !== 'undefined') { %>
            <div style="margin-top:10px;">Answer: <%= result %></div>
        <% } %>
        <br>
        <a class="back" href="/">home</a>
    </body>
</html>

方案二：前端异步请求（无刷新显示结果） #

通过AJAX提交表单，无需刷新页面即可展示计算结果：

1. 修改app.js的POST路由，返回JSON格式结果：

const express= require("express");
const bodyParser=require("body-parser");
const app= express();
app.set('view engine', 'ejs');
app.use(bodyParser.urlencoded({extended:true}));
app.use(express.static("public"))

app.get("/",function(req,res){
    res.render('home');
});

app.get("/add",function(req,res){
    res.render('add');
});

app.post("/add",function(req,res){
    var num1=Number(req.body.n1);
    var num2=Number(req.body.n2);
    var result=num1+num2;
    // 返回JSON格式结果
    res.json({ answer: result });
});

2. 修改add.ejs，添加前端交互逻辑：

<!DOCTYPE html>
<html dir="rtl">
    <head>
        <title>calc add</title>
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
        <form id="calcForm" action="/add" method ="post">
            <input type="text" class="input" name="n1" placeholder="enter x1"><br>
            <br>
            <input type="text" class="input" name="n2" placeholder="enter x2"><br>
            <br>
            <button type="submit" class="submit" name="Submit">calc!</button>
        </form>
        <!-- 结果展示区域 -->
        <div id="resultArea" style="margin-top:10px;"></div>
        <br>
        <a class="back" href="/">home</a>

        <script>
            const form = document.getElementById('calcForm');
            const resultArea = document.getElementById('resultArea');

            form.addEventListener('submit', async (e) => {
                e.preventDefault(); // 阻止表单默认跳转
                const formData = new FormData(form);
                
                try {
                    const response = await fetch('/add', {
                        method: 'POST',
                        body: formData
                    });
                    const data = await response.json();
                    resultArea.textContent = `Answer: ${data.answer}`;
                } catch (error) {
                    resultArea.textContent = '计算出错，请检查输入';
                }
            });
        </script>
    </body>
</html>

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