使用jQuery Ajax提交Form Data后仅显示JSON未触发success函数问题

核心问题是没有阻止表单的默认提交行为，浏览器触发了传统的表单提交流程，直接跳转到路由地址展示返回的JSON，跳过了Ajax的回调逻辑。下面是具体的排查和解决步骤：

1. 阻止表单默认提交行为 #

这是最常见的触发原因。不管是监听按钮的click事件还是表单的submit事件，都必须手动阻止默认行为：

方式一：监听按钮点击时阻止默认行为 #

$('#submit-btn').click(function(e) {
    // 阻止浏览器默认的表单提交行为
    e.preventDefault();
    
    // 你的Ajax提交逻辑
    $.ajax({
        url: '/add-project',
        type: 'POST',
        data: $('#project-form').serialize(),
        dataType: 'json',
        success: function(response) {
            if (response.status === 'OK') {
                console.log('提交成功');
                // 可添加成功后的操作：比如提示弹窗、清空表单等
            }
        },
        error: function(xhr, status, error) {
            console.error('提交失败:', error);
        }
    });
});

方式二：监听表单的submit事件（更推荐） #

相比监听按钮点击，监听表单的submit事件能覆盖所有提交场景（比如用户按回车提交）：

$('#project-form').submit(function(e) {
    e.preventDefault();
    
    $.ajax({
        url: $(this).attr('action'), // 直接复用表单的action属性，更灵活
        type: $(this).attr('method'),
        data: $(this).serialize(),
        dataType: 'json',
        success: function(response) {
            if (response.status === 'OK') {
                alert('项目添加成功');
                $('#project-form')[0].reset(); // 清空表单
            }
        }
    });
});

2. 检查Ajax配置是否正确 #

• 确保type设置为POST，和Flask路由的methods=['POST']匹配；
• 用$(form).serialize()正确序列化表单数据，避免手动拼接数据出错；
• 必须加上dataType: 'json'，告诉jQuery预期返回JSON格式，这样会自动解析响应，确保success回调能拿到正确的对象。

3. 检查Flask后端响应格式 #

如果后端返回的不是标准JSON响应，jQuery可能无法识别，导致success不触发。必须用jsonify返回，而不是直接return字符串：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/add-project', methods=['POST'])
def add_project():
    # 获取表单数据示例
    project_name = request.form.get('project_name')
    # 这里写你的数据保存逻辑...
    
    # 必须用jsonify返回，它会自动设置Content-Type为application/json
    return jsonify({"status":"OK"})

if __name__ == '__main__':
    app.run(debug=True)

如果直接写return '{"status":"OK"}'，浏览器会把它当成普通文本，jQuery可能不会触发success回调（因为预期是JSON但实际是text类型）。

额外排查点 #

打开浏览器开发者工具（F12），切换到Network标签，点击提交后查看请求：

• 如果看到两个请求（一个Ajax请求，一个表单提交请求），说明默认行为没阻止；
• 如果只有一个请求，查看响应的Content-Type是否为application/json，以及响应内容是否正确。

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