6

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

表格.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")

主文件

@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>

但这也不太顺利。

4

2 回答 2

3

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

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

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

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

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

于 2013-06-20T05:19:13.740 回答
2

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

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

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

如何在烧瓶中使用从 ajax 发布的数据？

于 2014-10-10T22:40:21.093 回答