在 Flask 中使用 jQuery：如何防止在提交表单时跳转到页面顶部？答案

【问题标题】：Using jQuery with Flask: how to prevent jumping to top of page on form submission?在 Flask 中使用 jQuery：如何防止在提交表单时跳转到页面顶部？
【发布时间】：2013-06-16 17:03:12
【问题描述】：

我在 Flask 中有一个单页网站，底部有一个联系表。如何防止浏览器在提交时跳转到页面顶部？我不能使用 return false 因为实际上并没有任何显式的 JavaScript 发生；我正在使用 Flask 的 WTForms。

<section id="contact">
<h2 class='contact'>Contact</h2>

{% if success %}
<p>Thanks for your message!</p>

{% else %}

{% for message in form.name.errors %}
<div class="flash">{{ message }}</div>

{% endfor %}

{% for message in form.email.errors %}
<div class="flash">{{ message }}</div>
{% endfor %}

{% for message in form.subject.errors %}
<div class="flash">{{ message }}</div>
{% endfor %}

{% for message in form.message.errors %}
<div class="flash">{{ message }}</div>
{% endfor %}

<form id="contactform" action="{{ url_for('contact') }}" method=post>
{{ form.hidden_tag() }}

## "autofocus=true" is to reload at the form on unsuccessful submission. ##

{{ form.name.label }}
{{ form.name(autofocus=true, placeholder="Jimmy Hoffa")}}

{{ form.email.label }}
{{ form.email(placeholder="xXxSparklePony1xXx@aol.com") }}

{{ form.subject.label }}
{{ form.subject }}

{{ form.message.label }}
{{ form.message }}

{{ form.submit }}
</form>
{% endif %}
</section>
</section>

这是我的 forms.py 和 main.py：

forms.py

from flask.ext.wtf import Form, TextField, TextAreaField, SubmitField, validators, ValidationError

class ContactForm(Form):
name = TextField("Name", [validators.Required("Please enter your name!")])
email = TextField("Email", [validators.Required("Please enter your email!"),       validators.Email("Enter a real email!")])
subject = TextField("Subject", [validators.Required("Please enter a subject!")])
message = TextAreaField("Message", [validators.Required("Please enter a message!")])
submit = SubmitField("Send")

main.py

@app.route('/', methods=['GET', 'POST'])
def contact():
form = ContactForm()

if request.method == 'POST':
    if form.validate() == False:
        flash('All fields are required.')
        return render_template('home.html', form=form)
    else:
        msg = Message(form.subject.data, recipients=['me@gmail.com'])
        msg.body = """
        From %s <%s>
        %s""" % (form.name.data, form.email.data, form.message.data)
        mail.send(msg)

        return render_template('home.html', success=True)

elif request.method == 'GET':
    return render_template('home.html', form=form)

if __name__=='__main__':
app.run(debug=True)

我想返回render_template('home.html#contact')，但是不能。

我知道解决方案必须如此简单，但我并不完全是 Flask（或 jQuery）专家。此外，我会很高兴收到成功提交的警告消息，例如 messenger.js（我也想不通），但我真的希望它在联系部分自动重新加载。

我也试过

{% if success %}
<script>$.load('/ #contact')</script>

但这也不是那么顺利。

【问题讨论】：

标签： jquery validation flask jinja2

【解决方案1】：

当您提交表单时，浏览器将删除当前页面并加载一个全新的页面，该页面来自您对 POST 请求的响应。

您有几个选项可以让新页面滚动：

您可以使用重定向来响应 POST 事件，而不是使用新页面响应。在您的示例中，您将重定向到http://<hostname>/home.html#contact。此方法可能不适用于所有浏览器，因为有些浏览器不支持重定向中的主题标签。
您的想法是让 jQuery 在页面加载后立即进行滚动，但您的 jQuery 实现不正确。请参阅this question 的答案，了解如何在加载时滚动。
以上两种方法都会导致窗口重新加载，因此即使新页面滚动到正确的位置，用户也会注意到页面重新加载。防止重新加载的一个选项是让 jQuery 在后台将表单作为 Ajax 请求提交，这样浏览器就不会重新加载页面。 This question 会给你一些想法。

【讨论】：

好吧，现在它在页面中间加载，离联系部分不远。我已经删除了我添加的所有额外的 jQuery 滚动动作，它仍然在页面中间加载。我认为部分问题是我正在使用 success=True 渲染主页模板，但我不知道现在滚动发生了什么。

【解决方案2】：

使用 jquery ajax 请求提交表单会更好——它会解决两个问题：

您的页面根本不会刷新
更好的用户体验

http://www.techillumination.in/2014/08/python-flask-and-jquery-ajax-post.html

how can I use data posted from ajax in flask?

【讨论】：