Javascript 当提交数据时，论坛会不断地在flask中重新加载_Javascript_Jquery_Python_Ajax_Flask

Javascript 当提交数据时，论坛会不断地在flask中重新加载

javascript jquery python ajax flask

Javascript 当提交数据时，论坛会不断地在flask中重新加载,javascript,jquery,python,ajax,flask,Javascript,Jquery,Python,Ajax,Flask,好的，最近我在Flask中制作了一个小论坛，它从表单中获取信息，并将其放入.csv或excel文件中。我的问题是，每次我点击提交按钮，整个页面都会重新加载，再次启动动画，等等我要做的是，一旦页面加载完毕，我按下提交按钮，我不希望页面重新加载，但仍会显示信息，例如表单旁边的信息，例如，感谢您登录jack 每次重新加载时，它仍然会保留信息，没有任何变化，只是页面每次都会重新加载，这正是我想要停止并让其他一切顺利运行的原因。我听说您可以使用Ajax，但我不太确定如何实现它。有人能帮忙吗这是我的密码

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

我要做的是，一旦页面加载完毕，我按下提交按钮，我不希望页面重新加载，但仍会显示信息，例如表单旁边的信息，例如，感谢您登录jack

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

这是我的密码

签名

    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>

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

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

编辑：

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

改变

<input type="submit" ...

这个编码应该能让你一窥它的样子。关于JSON的基础知识以及如何编写server view receive post，您必须了解自己。这至少是三个问题

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

你能在我的代码中提供一个例子吗，因为我不太确定它到底是如何工作的，我尝试了一下，但它并没有真正改变任何东西，因为我太冲动了。我添加了一个粗略的草案，说明它是如何工作的。关于细节，你应该了解你自己。这是一个相当宽泛的问题，我的python代码的rander部分，render_模板'form.html'，invalid=False，history=history，会引起问题吗？因为不管怎样它都会被渲染对吗？

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

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