如何提交Flask表单后停留在当前页面且不阻断邮件发送

问题分析 #

当前实现中，点击表单提交按钮会触发页面跳转，尝试的jQuery代码虽阻止了跳转，但因请求方法不匹配+表单默认行为未正确拦截，导致邮件发送逻辑完全未执行。

修复步骤 #

1. 修改前端jQuery代码 #

核心要做两件事：拦截表单默认跳转行为、确保AJAX请求方法与后端一致，同时添加成功提示。

$(document).ready(function(){
    var $form = $('form');
    $form.submit(function(event){
        // 阻止表单默认提交跳转
        event.preventDefault();
        
        // 用GET请求匹配后端当前路由，若后端改为POST则替换为$.post
        $.get($(this).attr('action'), $(this).serialize(), function(response){
            // 发送成功后弹窗提示
            alert('邮件发送成功！');
            // 可选：清空表单内容
            $form[0].reset();
        });
    });
 });

2. 优化后端Flask代码 #

• 同时支持GET/POST方法（建议优先用POST，更符合表单提交规范）
• 返回标准JSON格式，方便前端处理
• 修复收件人参数（recipients要求为数组类型，直接传字符串会报错）

from flask import jsonify, request

@application.route('/send_email', methods=['GET', 'POST'])
def send_email():    
    # 根据请求方法获取参数，POST用request.form，GET用request.args
    if request.method == 'POST':
        to_address = request.form.get('to-address')
        subject = request.form.get('email-title')
        text = request.form.get('email-body')
    else:
        to_address = request.args.get('to-address')
        subject = request.args.get('email-title')
        text = request.args.get('email-body')

    # 修复：recipients需传入列表而非字符串
    msg= Message(
        subject,
        sender="abc@email.com",
        recipients=[to_address],
    )

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

    # 返回JSON格式响应
    return jsonify({"status": "success"})

3. 可选：前端表单补充method属性 #

如果改用POST请求，给表单加上method="POST"更规范：

<form class="form-container" action="{{ url_for('send_email') }}" method="POST">
    <!-- 原有表单内容保持不变 -->
</form>

此时前端AJAX需对应改为$.post，与后端POST方法匹配。

原代码失效原因 #

1. 请求方法不匹配：后端路由仅支持GET，但前端用$.post发送POST请求，后端无法处理，导致邮件未发送。
2. 未正确拦截默认行为：代码中return true会让表单继续执行默认跳转，AJAX请求可能尚未完成页面就已跳转，即使方法匹配也会出问题。

内容的提问来源于stack exchange，提问作者sgrimes