将jQuery与Flask结合使用：如何防止表单提交时跳至页面顶部？

Question

我在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：

表格

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>

但这也不是很顺利。

Answer 1

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

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

1. 您可以使用重定向来响应，而不是使用新页面来响应 POST 事件。在您的示例中，您将重定向到http://<hostname>/home.html#contact. 此方法可能不适用于所有浏览器，因为有些浏览器不支持重定向中的主题标签。

2. 您让 jQuery 在页面加载后立即进行滚动的想法是一个很好的想法，但您的 jQuery 实现是不正确的。请参阅此问题的答案以了解如何在加载时滚动。

3. 上面的两种方法将导致窗口重新加载，因此即使新页面滚动到正确的位置，用户也会注意到页面重新加载。防止重新加载的一个选项是让 jQuery 在后台将表单作为 Ajax 请求提交，这样浏览器就不会重新加载页面。这个问题会给你一些想法。