Django AJAX表单提交始终无效问题排查

问题描述 #

我有一个Django项目，视图里包含两个表单，通过两个独立AJAX请求提交。第一个AJAX请求可成功填充第二个表单的一个值，第二个表单带有初始值，后续计划隐藏部分字段，仅展示用户需填写的必要字段。视图中通过request.is_ajax()和request.method == 'POST'判断请求类型，传入ajax_type区分两个AJAX请求。第二个AJAX请求使用ModelForm，本应验证通过后创建模型实例，但始终无法通过验证——尽管前端提交时所有字段已填写，AJAX请求返回成功，但控制台打印所有必填字段均提示“该字段为必填项”，疑似表单数据丢失。

核心问题分析 #

1. 请求格式不匹配：前端用JSON.stringify()发送JSON格式数据，但Django默认的request.POST仅能解析application/x-www-form-urlencoded格式的表单数据，无法读取JSON请求体内容，导致表单初始化时无数据可用，验证失败。
2. 表单初始化逻辑错误：AJAX分支中重新初始化表单时，仍使用空的request.POST，同时重复传入initial参数（initial仅用于渲染初始值，不会作为验证默认值），干扰验证逻辑。
3. JSON数据未传递给表单：虽然后端用json.load(request)读取了JSON数据，但未将这些数据传入表单，表单依然从空的request.POST获取数据。

修复步骤 #

1. 前端AJAX调整（两种可选方案） #

方案一：发送表单格式数据（推荐，适配Django默认处理）

移除JSON.stringify()，直接传递键值对对象，jQuery会自动编码为表单格式，同时确保传递所有表单必填字段：

$(document).on('submit', '#tax_form', function (e) {
    e.preventDefault()
    $.ajax({
        url: "http://127.0.0.1:8000/canada/",
        type: 'POST',
        data: {
            ajax_type: "tax_entry",
            control_number: $('#id_control_number').val(),
            item_number: $('#id_item_number').val(),
            vendor_tax_code: $('#id_vendor_tax_code').val(),
            expiration_flag: 1,
            country: 'US',
            charge_uom: 'CA',
            charge_percentage: 0.0,
            apply_flag: 1,
            rev_date: $('#id_rev_date').val(),
            rev_time: $('#id_rev_time').val(),
            est_date: $('#id_est_date').val(),
            est_time: $('#id_est_time').val(),
            program_id: 'BI008',
            operator_id: 'FKRUGER',
            // 补充其他必填字段的值
            charge_category: $('#id_charge_category').val(),
            charge_desc_code: $('#id_charge_desc_code').val(),
            state: $('#id_state').val(),
            charge_amount: $('#id_charge_amount').val(),
            beg_del_date: $('#id_beg_del_date').val(),
            end_del_date: $('#id_end_del_date').val()
        },
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": getCookie("csrftoken"),
        },
        success: function (data) {
            console.log(data)
            console.log("第二次AJAX请求成功，表单验证通过！")
        },
        error: function (error) {
            console.log(error.responseJSON.errors)
            console.log("第二次AJAX请求失败")
        }
    })
})

方案二：继续发送JSON，设置正确Content-Type

若坚持使用JSON格式，需添加contentType: "application/json"，让后端识别请求体格式：

$(document).on('submit', '#tax_form', function (e) {
    e.preventDefault()
    $.ajax({
        url: "http://127.0.0.1:8000/canada/",
        type: 'POST',
        dataType: "json",
        contentType: "application/json", // 新增该行
        data: JSON.stringify({
            ajax_type: "tax_entry",
            control_number: $('#id_control_number').val(),
            item_number: $('#id_item_number').val(),
            vendor_tax_code: $('#id_vendor_tax_code').val(),
            expiration_flag: 1,
            country: 'US',
            charge_uom: 'CA',
            charge_percentage: 0.0,
            apply_flag: 1,
            rev_date: $('#id_rev_date').val(),
            rev_time: $('#id_rev_time').val(),
            est_date: $('#id_est_date').val(),
            est_time: $('#id_est_time').val(),
            program_id: 'BI008',
            operator_id: 'FKRUGER',
            // 补充其他必填字段的值
            charge_category: $('#id_charge_category').val(),
            charge_desc_code: $('#id_charge_desc_code').val(),
            state: $('#id_state').val(),
            charge_amount: $('#id_charge_amount').val(),
            beg_del_date: $('#id_beg_del_date').val(),
            end_del_date: $('#id_end_del_date').val()
        }),
        headers: {
            "X-Requested-With": "XMLHttpRequest",
            "X-CSRFToken": getCookie("csrftoken"),
        },
        success: function (data) {
            console.log(data)
            console.log("第二次AJAX请求成功，表单验证通过！")
        },
        error: function (error) {
            console.log(error.responseJSON.errors)
            console.log("第二次AJAX请求失败")
        }
    })
})

2. 后端视图修复 #

适配方案一（表单格式数据）

from django.http import JsonResponse
from django.db.models import Max
import datetime as dt

def canadaTaxEntries(request):
    newest_record = LAWCHG.objects.aggregate(Max('control_number'))
    newest_control_number = newest_record["control_number__max"]
    today = dt.date.today().strftime("1%y%m%d")
    current_time = dt.datetime.now().strftime("%H%M%S")

    # 初始渲染表单时只传initial，不传request.POST
    initial_data = {
        'control_number': (newest_control_number + 1),
        'expiration_flag': 1,
        'country': 'US',
        'charge_uom': 'CA',
        'charge_percentage': 0.0,
        'apply_flag': 1,
        'rev_date': today,
        'rev_time': current_time,
        'est_date': today,
        'est_time': current_time,
        'program_id': 'BI008',
        'operator_id': 'FKRUGER',
    }
    canada_tax_form = CanadaTaxForm(initial=initial_data)

    if request.is_ajax() and request.method == 'POST':
        ajax_type = request.POST.get("ajax_type")

        if ajax_type == "screen_item":
            print('第一个请求')
            num = request.POST.get("item")
            itmnum = int(num)
            return screen_item_ajax(itmnum)
        
        elif ajax_type == "tax_entry":
            print("第二个请求")
            # 用request.POST初始化表单，无需再传initial
            canada_tax_form = CanadaTaxForm(request.POST)
            if canada_tax_form.is_valid():
                print("VALID")
                canada_tax_form.save()
                return JsonResponse({"status": "success"})
            else:
                print("NOT VALID")
                print(canada_tax_form.errors)
                return JsonResponse(
                    {"status": "error", "errors": canada_tax_form.errors.as_json()},
                    status=400
                )

    context = {
        "canada_tax_form": canada_tax_form,
    }
    return render(request, "html/canadaTaxEntries.html", context)

适配方案二（JSON格式数据）

from django.http import JsonResponse
from django.db.models import Max
import datetime as dt
import json

def canadaTaxEntries(request):
    newest_record = LAWCHG.objects.aggregate(Max('control_number'))
    newest_control_number = newest_record["control_number__max"]
    today = dt.date.today().strftime("1%y%m%d")
    current_time = dt.datetime.now().strftime("%H%M%S")

    initial_data = {
        'control_number': (newest_control_number + 1),
        'expiration_flag': 1,
        'country': 'US',
        'charge_uom': 'CA',
        'charge_percentage': 0.0,
        'apply_flag': 1,
        'rev_date': today,
        'rev_time': current_time,
        'est_date': today,
        'est_time': current_time,
        'program_id': 'BI008',
        'operator_id': 'FKRUGER',
    }
    canada_tax_form = CanadaTaxForm(initial=initial_data)

    if request.is_ajax() and request.method == 'POST':
        data = json.load(request)
        ajax_type = data.get("ajax_type")

        if ajax_type == "screen_item":
            print('第一个请求')
            num = data.get("item")
            itmnum = int(num)
            return screen_item_ajax(itmnum)
        
        elif ajax_type == "tax_entry":
            print("第二个请求")
            # 将JSON数据转换为表单需要的字典，键名与表单字段一致
            form_data = {
                'control_number': data.get("control_number"),
                'item_number': data.get("item_number"),
                'vendor_tax_code': data.get("vendor_tax_code"),
                'expiration_flag': data.get("expiration_flag", 1),
                'country': data.get("country", 'US'),
                'charge_uom': data.get("charge_uom", 'CA'),
                'charge_percentage': data.get("charge_percentage", 0.0),
                'apply_flag': data.get("apply_flag", 1),
                'rev_date': data.get("rev_date", today),
                'rev_time': data.get("rev_time", current_time),
                'est_date': data.get("est_date", today),
                'est_time': data.get("est_time", current_time),
                'program_id': data.get("program_id", 'BI008'),
                'operator_id': data.get("operator_id", 'FKRUGER'),
                'charge_category': data.get("charge_category"),
                'charge_desc_code': data.get("charge_desc_code"),
                'state': data.get("state"),
                'charge_amount': data.get("charge_amount"),
                'beg_del_date': data.get("beg_del_date"),
                'end_del_date': data.get("end_del_date"),
            }
            canada_tax_form = CanadaTaxForm(form_data)
            if canada_tax_form.is_valid():
                print("VALID")
                canada_tax_form.save()
                return JsonResponse({"status": "success"})
            else:
                print("NOT VALID")
                print(canada_tax_form.errors)
                return JsonResponse(
                    {"status": "error", "errors": canada_tax_form.errors.as_json()},
                    status=400
                )

    context = {
        "canada_tax_form": canada_tax_form,
    }
    return render(request, "html/canadaTaxEntries.html", context)

额外优化建议 #

• 隐藏字段处理：若要隐藏字段，在ModelForm中设置widgets = {'字段名': forms.HiddenInput()}，或模板中用{{ form.字段名.as_hidden }}渲染，字段值会自动包含在表单提交数据中，无需手动拼接。
• 默认值优化：将initial_data中的固定值设置为模型字段的默认值，或在ModelForm的__init__方法中初始化，减少视图冗余代码。
• 错误反馈：前端解析后端返回的错误信息，展示给用户，提升交互体验。

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