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

Question

I am trying to create a calculator app using express.js to get request for an html file and a post request that takes the user's input and responds with the answer.我正在尝试使用 express.js 创建一个计算器应用程序，以获取对 html 文件的请求和一个接受用户输入并以答案响应的发布请求。 However, I want to display my answer inside a html container without the page redirecting.但是，我想在没有页面重定向的情况下在 html 容器中显示我的答案。 Is there a way to achieve this with vanilla javascript?有没有办法用香草 javascript 来实现这一点？

index.html索引.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>

app.js应用程序.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 Evaluated Expression CalculatorApp 评估表达式

Answer 1

You will need to write front end JavaScript code to make the ajax request instead of having the form action submit the request.您将需要编写前端 JavaScript 代码来发出 ajax 请求，而不是让表单操作提交请求。 The JavaScript will receive the response and can update the value on the HTML. 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