如何在不更改 URL 的情况下在网站上显示 textarea 客户端输入？

Question

我正在尝试在我的网站上实现一项功能，用户可以在文本区域中输入评论并让它在评论框下方显示评论。对于后端，我使用的是瓶子。目前，bottle 正在识别输入，当输入提交时，会加载一个新的 url，仅显示 textarea 的输入。 提交时，我需要将textarea输入显示在textarea框下方，不改变网页。

这里是 HTML 文本区域输入

<div>
  <p>
    Add a comment
  </p> 

  <form action="/comment" method="post">
  <textarea name="text"></textarea>
  <input type="submit" value="Submit">
  </form>
  
</div>

main.py 中的瓶子

@route('/comment', method = 'POST')
def submit():
  com = request.forms.get('text')
  print('Printing comment...')
  print(com)
  return com

index.js，（我不知道如何集成这个功能）

function loadCom () {

  var xhttp2 = new XMLHttpRequest();
    xhttp2.onreadystatechange = function(){
        if (this.readyState === 4 && this.status === 200){
            console.log(this.response);

            document.getElementById("dcom").innerHTML = this.response;  
        }
    };

  xhttp2.open("GET", "/comment");
  xhttp2.send();

  return false
}

Answer 1

从事件监听器调用loadCom()。

document.querySelector("form").addEventListener("submit", e => {
    e.preventDefault(); // prevent reloading the page
    loadCom();
});

loadCom()需要使用POST方法将textarea的值发送给控制器。

function loadCom () {

  var xhttp2 = new XMLHttpRequest();
    xhttp2.onreadystatechange = function(){
        if (this.readyState === 4 && this.status === 200){
            console.log(this.response);

            document.getElementById("dcom").innerHTML = this.response;  
        }
    };

  xhttp2.open("POST", "/comment");
  xhttp2.send('text=' + encodeURIComponent(document.querySelector('[name="text"]').value);

  return false
}