Question

好的，最近我在Flask中创建了这个小论坛，从表单中获取信息并将其放入.csv或excel文件中。我的问题是，每次我点击提交按钮，整个页面重新加载，再次启动动画等。

我想要做的是，一旦页面加载并按下提交按钮，我不希望页面重新加载，但仍然继续显示表格旁边的信息，例如＆＃34;感谢您登录杰克＆＃34;。

每次重新加载时，它仍然保留信息，没有任何改变，只是每次重新加载页面这是我想要停止并让其他一切顺利运行的事实。我听说你可以使用Ajax，但我不确定如何实现它。有人可以帮忙吗

这是我的代码

signin.py

    import time
from collections import deque
from flask import Flask, render_template, request
import csv
import re

app = Flask(__name__)

history = deque(maxlen=5)


def sanitise(string):
    return re.sub('[<>]', '', string)

def valid_login(name, email):
    try:
        name.decode('ascii')        
    except:
        return False

    else:

        if len(name) > 0:
            return True
        else:
            return False


def log_entry(name, email, filename = "static/attendance.csv"):
    name = sanitise(name)
    try:
        with open(filename, "r") as f:
            pass
    except IOError:
        #file does not exist
        with open(filename, "w") as f:
            f.write("SIGNIN TABLE \n")
            f.write(time.strftime('%Y-%b-%d \n'))
    finally:
        with open(filename, "a") as f:
                f.write("{0}, {1} \n".format(name, email))
                history.appendleft("Successfully signed in {0}".format(name))



@app.route('/', methods = ['POST', 'GET'])
def show_form():
    if request.method == "POST":
        if valid_login(request.form['name'],request.form['email']):
            print request.form['name'], request.form['email']
            log_entry(request.form['name'], request.form['email'])
        else:
            history.appendleft("Please try again")

            #return render_template('form.jinja', invalid = True, history = history)
    return render_template('form.html', invalid = False, history = history)

@app.route('/attendance', methods = ['GET'])
def get_attendance():
    rdr = csv.reader(open("static/attendance.csv", "r"))
    csv_data = [row for row in rdr]
    return render_template('table.html', data = csv_data)


if __name__ == '__main__':
    app.run(debug=True, host = '0.0.0.0', port = 8000)

我的HTML文档

    <!doctype html>
<head>
    <meta charset = "utf-8" />
    <title>QAHS Anime Club Signin</title>
    <link rel = "stylesheet" href = "/static/form_stylesheet.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">  </script>
</head>
<body>
    <div id = "wrapper">
        <div id = "form_wrapper" style="display:none" >
            <h1>Anime Club Sign In</h1>
            {% if invalid %}
            <h3>Invalid entry. The Name field must not be blank, and can only use ASCII characters.</h3>
            {% endif %}
            <form action = "" method = "POST" > 
                <ul>
                    <li>
                        <label for = "name">Name:</label>
                        <input id = "name" name = "name" autocomplete = "off" spellcheck = false maxlength = "70"/>
                    </li>
                    <li>
                        <label for = "email">Email:</label>
                        <input id = "email" name = "email" autocomplete = "off" placeholder = "Optional" spellcheck = false maxlength = "254"/>
                    </li>
                    <li>
                        <input type = "submit" value = "Sign In"/>
                    </li>
                </ul>
            </form>
        </div>
        <div id = "history"  style="display:none">
        <center>
        <ul>
            {% for item in history %}
                <li style="color:black; text-align: center">
                    {{ item }}
                </li>
            {% endfor %}
        </ul>
        </center>
        </div>
    </div>



<script type="text/javascript">
 $(document).ready(

    function(){
        setInterval(function(){

        $("#form_wrapper" ).fadeTo("slow",1.0);

        },500)

        setInterval(function(){

        $("#history").fadeTo("slow",1.0);

        },1000)


});


    </script>


</body>

Answer 1

通常，在处理POST消息时，不应再次呈现同一页面。相反，它是标准的，您可以直接重定向到另一个页面（例如，您可以在其中显示感谢页面）。

这就是通常实现网络表单的方式。当你想要改变它时，你就是靠自己。我建议你看看jQuery。使用jQuery.post（）（或$ .post（）），您可以发送POST消息而无需加载新页面。在这种情况下，我建议您使用不同的视图（不是表单视图）。您的JavaScript代码必须自己处理POST消息的结果。另一个标准是JSON - 这种格式通常用于AJAX结果。

编辑：

首先，您必须摆脱提交按钮的默认行为：

更改

<input type="submit" ...

到

<button type="button" id="submit-button" />

然后添加这个JS编码来自己处理提交：

$("submit-button").click(function() {
    $.ajax("/receive-post", {"name": $("#name").val(), "email": $("#email").val(), function(result) {
       console.log("Got "+result);
    });
}

这个编码应该给你一个小小的一瞥，它看起来如何。有关JSON的基础知识以及如何编写服务器视图（接收帖子），您必须自己找出答案。这至少有三个问题！

我也没有测试编码，这只是一个粗略的方向......

论坛在提交数据时不断重新加载

1 个答案: