在Flask中使用jQuery：如何防止在表單提交時跳到頁首？

我在Flask中有一個單頁面站點，底部有一個聯繫表單。如何防止瀏覽器跳轉到提交頁面的頂部？我不能使用返回false，因爲沒有真正的JavaScript發生。我正在使用Flask的WTForms。在Flask中使用jQuery：如何防止在表單提交時跳到頁首？

<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="[email protected]") }} 

{{ 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=['[email protected]']) 
     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（「家.html＃contact'），但我不能。

我知道解決方案必須如此簡單，但我不完全是Flask（或jQuery）專家。此外，我會很高興與成功提交像messenger.js（我也不知道）成功提交警告消息，但我真的只是喜歡它自動重新加載在聯繫人部分。

我也試過

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

但這並沒有多麼容易。

來源

2013-06-20 yung galbanum

當您提交表單時，瀏覽器將丟棄當前頁面並加載一個全新的表單，該表單來自您對POST請求的響應。

您有幾個選項來獲得新的頁面滾動：

響應POST事件與新的頁面，而不是，您可以用重定向響應。在你的例子中，你會重定向到http://<hostname>/home.html#contact。這種方法可能不適用於所有瀏覽器，因爲有些不遵守重定向中的主題標籤。
你的想法讓jQuery在頁面加載後儘快滾動，但是你的jQuery實現是不正確的。請參閱this question的答案以瞭解如何滾動加載。
上述兩種方法會導致窗口重新加載，因此即使新頁面滾動到正確的位置，用戶也會注意到頁面會重新加載。防止重新加載的一個選擇是讓jQuery將Ajax請求作爲後臺提交，這樣瀏覽器就不會重新加載頁面。 This question會給你一些想法。

來源

2013-06-20 05:19:13 Miguel

好吧，現在它正在加載在頁面中間，遠不及接觸部分。自從我刪除了所有額外的jQuery滾動操作後，它仍然在頁面中間加載。我認爲問題的一部分是我用success = True渲染家庭模板，但我不知道現在滾動發生了什麼。 –