Flask应用中Ajax提交表单调用preventDefault仍刷新页面如何解决

问题根源排查与解决 #

1. 修复JavaScript语法错误 #

你当前的脚本中jQuery选择器缺少引号，语法错误直接导致代码执行中断，e.preventDefault()没有生效，表单触发默认提交行为导致页面刷新。
修正后的脚本代码：

<script>
// 请确保页面已提前引入jQuery库，否则脚本无法执行
$(document).on('submit', '#vocab_form', function(e){
    e.preventDefault();
    $.ajax({
        type:'POST',
        url:'/',
        data:{
            word:$("#word").val(), // 选择器补充双引号
            def:$("#def").val()    // 选择器补充双引号
        },
        success:function(resp){
            alert('添加成功：' + resp.message);
            // 此处可添加页面内容更新逻辑，比如动态插入新单词到列表区域
        },
        error:function(){
            alert('提交失败，请检查输入内容');
        }
    }) 
});
</script>

2. 调整Flask路由适配Ajax请求 #

你当前路由无论是否为Ajax请求，都返回完整的HTML页面，不符合异步请求的交互逻辑，需要区分请求类型返回对应格式的数据：

from flask import request, render_template, jsonify

@app.route("/", methods=["GET", "POST"])
def hello():
    # 判断是否为Ajax异步请求
    if request.headers.get('X-Requested-With') == 'XMLHttpRequest':
        word = request.form["word"]
        definition = request.form["def"]
        query.add_word(word, definition)
        return jsonify({
            "status": "success",
            "message": f"Word added successfully! {word} means {definition}"
        })
    # 普通GET请求返回完整页面
    wordlist=query.get_all_words()
    lines = web_functions.get_les_mis()
    return render_template("home.html", wordlist=wordlist, lines=lines)

3. 检查jQuery库引入 #

确保你在表单页的<head>标签内，或者在自定义脚本之前引入了jQuery库，否则所有jQuery语法的代码都不会执行：

<script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>

4. 可选：提交后动态更新页面 #

如果需要在提交成功后不刷新更新页面的单词列表、提示信息，可以在success回调中操作DOM，将返回的内容插入到页面对应位置即可。

内容的提问来源于stack exchange，提问作者s-cat-z