Estoy intentando implementar una característica en mi sitio web, donde un usuario puede ingresar un comentario en un área de texto y hacer que muestre el comentario, debajo del cuadro de comentarios. Para el backend estoy usando una botella. En este momento, la botella reconoce la entrada y, cuando se envía la entrada, se carga una nueva URL que muestra solo la entrada del área de texto. Cuando se envía, necesito que la entrada del área de texto se muestre debajo del cuadro del área de texto, sin cambiar la página web.
Aquí está la entrada de área de texto HTML
<div> <p> Add a comment </p> <form action="/comment" method="post"> <textarea name="text"></textarea> <input type="submit" value="Submit"> </form> </div>Botella en main.py
@route('/comment', method = 'POST') def submit(): com = request.forms.get('text') print('Printing comment...') print(com) return comindex.js, (no estoy seguro de cómo integrar esta función)
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 }Llame loadCom() desde un detector de eventos.
document.querySelector("form").addEventListener("submit", e => { e.preventDefault(); // prevent reloading the page loadCom(); }); loadCom() necesita usar el método POST para enviar el valor del área de textarea al controlador.
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 }