Estoy tratando de crear una aplicación de calculadora usando express.js para obtener una solicitud de un archivo html y una solicitud de publicación que toma la entrada del usuario y responde con la respuesta. Sin embargo, quiero mostrar mi respuesta dentro de un contenedor html sin que la página se redirija. ¿Hay alguna manera de lograr esto con vainilla javascript?
índice.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>aplicación.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); });Deberá escribir el código JavaScript de front-end para realizar la solicitud ajax en lugar de que la acción del formulario envíe la solicitud. El JavaScript recibirá la respuesta y puede actualizar el valor en el 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>