Python 在烧瓶中，段落再次被覆盖，但我想单独打印它们_Python_Html_Css_Flask_Jinja2

Python 在烧瓶中，段落再次被覆盖，但我想单独打印它们

python html css flask

Python 在烧瓶中，段落再次被覆盖，但我想单独打印它们,python,html,css,flask,jinja2,Python,Html,Css,Flask,Jinja2,HTML代码片段： <div class="split left" > <div class="centered"> <div class="container"> <p>Hi!</p> </div> <div class="darker"> <p>{{message}}&l

HTML代码片段：

<div class="split left" >
<div class="centered">
<div class="container">

     <p>Hi!</p>

  </div>


   <div class="darker">


        <p>{{message}}</p>
    </div>

    <form action="{{ url_for('index')}}" method="post">

    <input type="text" name="client" placeholder="Enter Message" class="text" id="message">
     <button class="glow-on-hover">Send</button>

        </form>

每当我输入值并按下发送按钮时，它就会覆盖，但我想在每次按下发送按钮时打印一个新段落。在我看来，这个列表没有什么用处，因为它有点像聊天应用程序。因此，该列表将只显示一个收件人的邮件。有什么简单有效的方法吗？

在这里，我重新创建了您的代码，它似乎工作得很好。通常，表单刷新当前页面，导致内容被覆盖

Python代码：

@app.route("/")
def start():
    return render_template("index.html")

@app.route("/message")
def index():
    message = request.args.get("msg")
    return message

HTML代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function textGen(){
            $.get('/message', {"msg": document.getElementById('message').value }).done(function(data){
            document.getElementById("text").innerHTML += `<p>${data}</p>`;
            })
        }
    </script>
</head>

<body>
    <div class="split left">
        <div class="centered">
            <div class="container">

                <p>Hi!</p>

            </div>


            <div class="darker" id="text">

            </div>

                <input type="text" name="client" placeholder="Enter Message" class="text" id="message">
                <button class="glow-on-hover" onclick="textGen()">Send</button>


</body>

</html>


指数
函数textGen（）{
$.get（'/message'，{“msg”：document.getElementById（'message'）.value}）.done（函数（数据）{
document.getElementById（“text”）.innerHTML+=`${data}`；
})
}
嗨
发送

在这两个组件中，我使用jquery在flask中创建了msg处理程序，在javascript中创建了msg发送器。因此，此解决方案将在您的场景中起作用。请看一看，如果您在执行此代码时遇到任何错误或困难，请写信给我。我没有使用表单，所以它可以防止覆盖

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        function textGen(){
            $.get('/message', {"msg": document.getElementById('message').value }).done(function(data){
            document.getElementById("text").innerHTML += `<p>${data}</p>`;
            })
        }
    </script>
</head>

<body>
    <div class="split left">
        <div class="centered">
            <div class="container">

                <p>Hi!</p>

            </div>


            <div class="darker" id="text">

            </div>

                <input type="text" name="client" placeholder="Enter Message" class="text" id="message">
                <button class="glow-on-hover" onclick="textGen()">Send</button>


</body>

</html>