在不覆盖当前 html 的情况下显示 express.js res.send()

Question

我正在尝试使用 express.js 创建一个计算器应用程序，以获取对 html 文件的请求和一个接受用户输入并以答案响应的发布请求。 但是，我想在没有页面重定向的情况下在 html 容器中显示我的答案。 有没有办法用香草 javascript 来实现这一点？

索引.html

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <link rel="shortcut icon" href="#" />
    <title>Calculator</title>
  </head>
  <body>
    <h1>Calculator App</h1>
    <form action="/" method="post" class="ajax">
      <label for="userInput">Enter Equation</label>
      <input type="text" id="equation" name="equation" />
      <button type="submit" id="btn_submit">Calculate</button>
    </form>
    <div class="container"></div>
  </body>
</html>

应用程序.js

const express = require('express'); 
const app = express();
port = 3000;

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

app.get('/', (req, res) => {
    res.sendFile(__dirname + public);
});

app.post('/', (req, res) => {
    let equation = req.body.equation;
    console.log(equation);
    let result = eval(equation);
    res.status(200).send('Result is ' + result);
    
});

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

CalculatorApp 评估表达式

Answer 1

您将需要编写前端 JavaScript 代码来发出 ajax 请求，而不是让表单操作提交请求。 JavaScript 将接收响应并可以更新 HTML 上的值。

app.post('/', (req, res) => {
    let equation = req.body.equation;
    console.log(equation);
    let result = eval(equation);
    res.status(200).json({ value: `Result is ${result}` });
    
});

<script>  

 document.querySelector('form').addEventListener('submit',submitEquation);

    
        function submitEquation(event){
            event.preventDefault();
             const input = document.querySelector('#equation');
             const equation = input.value;
             const clearInput = true;
             if(clearInput){
                input.textContent = '';
             }
             fetch(window.location.origin, { 
                method: 'post', 
                body: JSON.stringify({ equation }) 
             })
             .then(response => response.json())
             .then(json => {
                  document.querySelector('.container').textContent = json.value;
             })
          }
</script>

在不覆盖当前 html 的情况下显示 express.js res.send()

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-06-11 06:19:25

在不覆盖当前 html 的情况下显示 express.js res.send()

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-06-11 06:19:25

解决方案1
0 已采纳 2022-06-11 06:19:25