Django表单通过jQuery AJAX提交后跳转至JSON页面问题求助

核心问题分析 #

页面跳转到JSON响应页，是因为AJAX代码未正确阻止表单默认提交行为，同时代码存在变量名错误、配置缺失等问题，导致AJAX请求根本没触发，表单走了原生提交流程。

分步修复代码 #

1. 修正jQuery AJAX代码 #

解决选择器错误、变量名混乱、FormData配置缺失问题：

// 匹配表单实际id
var add_handle_form = $('#handle_add_form');
add_handle_form.submit(function(e){
    e.preventDefault(); // 强制阻止表单默认提交，这是核心
    var form_data = new FormData(this);
    
    $.ajax({
        type: add_handle_form.attr('method'),
        url: add_handle_form.attr('action'),
        data: form_data, // 使用正确定义的FormData变量
        processData: false, // 禁止jQuery自动处理FormData
        contentType: false, // 让浏览器自动设置正确的请求头
        success: function(data){
            if(data.status === 'success'){
                alert(data.msg);
                location.reload(true);
            } else {
                alert(data.msg);
            }
        },
        error: function(){
            alert('提交失败，请检查网络或重试');
        }
    });
});

2. 修正Django视图函数（views.py） #

修复表单验证逻辑、返回格式错误、异常处理问题：

from django.http import JsonResponse
from django.contrib.auth.decorators import login_required

@login_required(login_url='/')
def Add_Handle_M(request):
    if request.method == "POST":
        form = HandleMaster_Form(request.POST)
        # 调用is_valid()方法，不是直接引用属性
        if form.is_valid():
            try:
                form_instance = form.save(commit=False)
                form_instance.create_by = request.user
                form_instance.save() # 解除注释，完成数据保存
                return JsonResponse({'status': 'success', 'msg': '添加成功'})
            except Exception as e:
                return JsonResponse({'status': 'error', 'msg': str(e)})
        else:
            # 整理表单验证错误信息
            error_msg = '; '.join([f"{k}: {v[0]}" for k, v in form.errors.items()])
            return JsonResponse({'status': 'error', 'msg': error_msg})
    # 非POST请求直接返回错误
    return JsonResponse({'status': 'error', 'msg': '仅支持POST请求'})

3. 确认HTML与URL配置 #

确保表单action对应的URL名称add_handle_m在urls.py中正确映射到Add_Handle_M视图（当前urls.py中的add_grp_page_m是另一个路径，需单独配置add_handle_m的路由）：

<form id="handle_add_form" action="{% url 'add_handle_m' %}" method="post">
    {% csrf_token %}
    {{ Handle_Form }}
    <div class="mt-1">
        <button type="submit" class="btn btn-primary">Save</button>
    </div>  
</form>

关键注意事项 #

• CSRF令牌会通过FormData(this)自动携带，无需额外处理；
• 使用FormData提交时，必须设置processData: false和contentType: false，否则服务器无法解析表单数据；
• AJAX请求不要用Django的messages框架，直接返回JSON格式的状态和消息即可。

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