在未重新加载页面的发布后显示数据

Question

我有这个node.js应用程序，您可以在其中发布有关教师个人资料的评论。

contert.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>

index.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        
  });    
});

在数据库上插入了TextArea上键入的数据，但我的网页试图重新加载并永远加载。

我想要的是在不重新加载页面的情况下显示插入的新数据，该怎么做？

我尝试直接使用contercy.ejs上的脚本插入新数据，但是它没有用：

<!-- 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>

最好的方法是什么？