如何用原生JS实现Express res.send()返回内容不覆盖当前HTML

完全可以通过原生JavaScript实现该需求，无需引入任何第三方前端库，核心逻辑是拦截表单默认提交跳转行为，通过异步请求向后端接口发送数据，拿到返回结果后局部更新页面DOM即可。

现有代码修复 #

你当前的后端代码存在一处路径错误，先修正app.js的逻辑：

const express = require('express'); 
const app = express();
const port = 3000; // 补全变量声明，避免全局变量污染

app.use(express.urlencoded({ extended : false }));
app.use(express.static('public'));

app.get('/', (req, res) => {
    // 修正原代码未定义public变量的错误，指定index.html的正确路径
    // 请确保index.html放在项目根目录的public文件夹下
    res.sendFile(__dirname + '/public/index.html');
});

app.post('/', (req, res) => {
    const equation = req.body.equation;
    console.log(equation);
    // 注意：直接使用eval执行用户输入存在严重安全风险，正式环境请替换为安全的算式解析方案
    const result = eval(equation);
    res.status(200).send('Result is ' + result);
});

app.listen(port, ()=> {
    console.log('Hosted on port: ' + port);
});

前端无跳转提交实现 #

在原index.html的</body>标签前添加如下原生JavaScript代码，即可实现提交不跳转、结果局部渲染：

<script>
// 获取页面DOM元素
const calcForm = document.querySelector('form.ajax');
const resultBox = document.querySelector('.container');
const equationInput = document.getElementById('equation');

// 监听表单提交事件
calcForm.addEventListener('submit', async function(e) {
  // 阻止表单默认的跳转提交行为
  e.preventDefault();

  const inputVal = equationInput.value.trim();
  if (!inputVal) {
    resultBox.textContent = '请输入有效算式';
    return;
  }

  try {
    // 异步发送POST请求到后端接口
    const response = await fetch('/', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      // 序列化表单数据，和原生表单提交格式保持一致
      body: new URLSearchParams({ equation: inputVal })
    });
    // 读取后端返回的文本结果
    const result = await response.text();
    // 将结果写入指定容器
    resultBox.textContent = result;
  } catch (err) {
    resultBox.textContent = '请求失败，请检查服务是否正常运行';
  }
})
</script>

补充说明 #

• 上述代码使用了Fetch API实现异步请求，兼容性覆盖所有现代浏览器，如果需要兼容极老旧浏览器，可以替换为XMLHttpRequest写法，核心逻辑不变。
• 后端直接调用eval()处理用户输入属于高危操作，恶意用户可以传入任意可执行代码攻击服务端，正式使用时务必替换为专门的数学表达式解析库，禁止直接执行用户传入的字符串。
• 请确保index.html、styles.css都存放在项目根目录的public文件夹下，否则静态资源无法正常加载。

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