Tengo esta aplicación node.js donde puedes publicar comentarios sobre los perfiles de los profesores.

profesor.ejs

 <!-- Form --> <div class=""> <form id="commentsForm" action="/teachers/<%=teacher[0].name%>" method="POST"> <textarea class="comments" placeholder="Write here..." name="comm" id="comment" required></textarea> <button class="commentsButton" type="submit">Send comment</button> </form> </div> <!-- Displaying comments from database with GET request --> <div id="commentsDiv" class="commentsDB"> <% for(var i=0;i<comment.length;i++) { %> <div> <h5><%=comment[i].content%></h5> ... </div> <% } %> </div>

índice.js

 // GET request (works fine) router.get('/teachers/:name', function(req, res){ db.query("SELECT * FROM comments", function(err, result){ //... res.render('teacher', {comments: result}); }); }); // POST request router.post('/teachers/:name', (req, res) => { const {comm} = req.body; db.query("INSERT INTO comments (comment) VALUES (?)", [comm], function(err, post){ // Insert correctly on DB }); });

Los datos escritos en el área de texto se insertan en la base de datos, pero mi página web intenta volver a cargar y permanece cargando para siempre.

Lo que quiero es mostrar los nuevos datos insertados sin recargar la página, ¿cómo puedo hacer eso?

Intenté insertar los nuevos datos directamente con un script en teacher.ejs pero no funcionó:

 <!-- removing: action="/teachers/<%=teacher[0].name%>" method="POST" from <form> and adding: onClick="addComment() on <button>--> <form id="commentsForm" > <textarea class="comments" placeholder="Write here..." name="comm" id="comment" required></textarea> <button class="commentsButton" type="submit" onClick="addComment()">Send comment</button> </form> <script> function addComment(){ var input = $('#comment').val(); var newComment = document.createElement("h5"); var textComment = document.createTextNode(input); newComment.appendChild(textComment); document.getElementById().appendChild(newComment); } </script>

¿Cuál es la mejor manera de hacer esto?