如何在提交表单后保持在同一页面而不禁用操作(HTML/Flask)

Question

我编写了一个HTML模板来使用Flask发送电子邮件。在HTML脚本中，我有一个带有"send"按钮，一旦点击，它就会在Flask中触发一封电子邮件。

HTML脚本

<form class="form-container" action="{{ url_for('send_email') }}">
<div class="form-group">
<label for="to-address">To </label>
<input id= "to-address" name="to-address" type="email" 
placeholder="[e-mail]" class="form-input">
</div>
<div class="form-group">
<label for="title">Title</label>
<input id= "email-title" name="email-title" type="text" placeholder="Title" 
class="form-input">
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id= "email-body" name="email-body" placeholder="Send Message" class="form- 
text-area"></textarea>
</div>
<button id="email-send-btn" type ="submit" class="btn btn-primary"> Send </button>
</form>

瓶

@application.route('/send_email')
def send_email():    

to_address = request.args.get('to-address')
subject = request.args.get('email-title')
text = request.args.get('email-body')

msg= Message(
subject,
sender="[e-mail]",
recipients=to_address,

)
msg.html = render_template("email.html", text=text)
mail.send(msg)
return("success")

电子邮件本身工作良好，但我有一个问题，重定向页面后点击"发送"按钮。一旦我点击了Send按钮(其id="email- Send -btn&;)，我希望停留在当前页面，可能会显示一个通知弹出，表明电子邮件已成功发送。我把return('success) '放在Flask脚本的最后一行，因为我必须返回一些东西以避免出现空白页。

我试着在点击发送按钮后留在同一个页面。它可以让我保持在同一页面，但也完全阻止了行动，不发送任何电子邮件。是否有办法在点击发送按钮后保持在同一页面而不阻止发送电子邮件的动作?

$(document).ready(function(){
var $form = $('form');
$form.submit(function(){
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
},'json');
return true;
});
});

Answer 1

历来从提交处理程序返回false阻止表单提交，而不需要调用提交事件对象方法，如preventDefault和/或stopPropagation

仔细阅读，您可能会推断出jQuery文档中也有同样的内容:

如果你想阻止表单被提交，除非设置了一个标志变量…[从使用jQuery.submit(handler)语法添加的提交处理程序返回标志的值]

表示如果将标志变量设置为true，则不阻止表单提交。

因此返回false而不是true以留在页面上，让jQuery处理跨浏览器兼容性问题。

Answer 2

可以使用渲染模板+ flash消息

https://flask.palletsprojects.com/en/2.2.x/tutorial/templates/

https://flask.palletsprojects.com/en/2.2.x/patterns/flashing/

from flask import render_template, flash
... your code here ...
flash('Email has been sent successfully.')
return render_template('yourtemplate.html')

在你的模板中，你必须放入这些代码，就像在文档中一样:

% with messages = get_flashed_messages() %}
{% if messages %}
<ul class=flashes>
{% for message in messages %}
<li>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}

当然你可以使用任何HTML标签来代替无序列表。

Answer 3

现在你只是使用另一个回调，当表单提交时做一些事情，但你不阻止标准提交。为了实现这一点，你应该管理事件，定义他应该"防止违约"。行动。

$form.submit(function(e){ //< add here "e" parameter
e.preventDefault(); //< add this
$.post($(this).attr('action'), $(this).serialize(), function(response){
// do something here on success
},'json');
return false; //< change this
});