Django使用Ajax自动填充crispy表单字段触发CrispyError错误如何解决

AI 小北

2026-10-4

报错原因

你当前的load_record视图收到Ajax请求后，尝试渲染完整的表单模板Add_wellMntr.html，但你只给模板传递了record变量，没有传递渲染表单必须的form对象，所以模板执行到{{ form.PUITS|as_crispy_field }}时找不到对应的form字段，触发了Crispy报错。

修复方案

Ajax请求不需要返回完整页面，直接返回结构化的JSON数据，前端拿到数据后直接给对应字段赋值即可。

1. 修改views.py视图逻辑

# 先导入JsonResponse
from django.http import JsonResponse

def load_record(request):
    PUITS_id = request.GET.get('PUITS')
    # 用first()避免空数据时的索引错误
    record = SurveillanceDesPuits.objects.filter(PUITS_id__id__exact=PUITS_id).first()
    if not record:
        return JsonResponse({'code': 404, 'msg': '未找到对应记录'}, status=404)
    my_record = {
        'mode': str(record.MODE),
        'cs': str(record.CS)
    }
    return JsonResponse({'code': 200, 'data': my_record})

2. 修改前端Ajax逻辑

$("#id_PUITS").change(function () {
    var url = $("#SurveillanceDesPuits_F").attr("data-record-url");  
    var PUITSId = $(this).val();  
    $.ajax({                        
        url: url,                    
        data: {
            'PUITS': PUITSId       
        },
        dataType: 'json',
        success: function (res) {   
            if(res.code === 200){
                // 给两个字段直接赋值
                $("#id_MODE").val(res.data.mode);
                $("#id_CS").val(res.data.cs);
            }
        },
        error: function(){
            alert('加载数据失败，请重试');
        }
    });
});