Django中输入指定ID后如何自动填充bootstrap_form表单的关联数据

1. 编写后端查询接口 #

首先在你项目对应app的views.py中添加两个查询视图，接收ID参数后返回对应关联数据的JSON结果：

from django.http import JsonResponse
from .models import StudentRegistration, StaffRegistration

# 学生信息查询接口
def get_student_info(request):
    student_id = request.GET.get('id')
    try:
        student = StudentRegistration.objects.get(Id=student_id)
        data = {
            'code': 200,
            'StudentName': student.StudentName,
            'Std_Address': student.Std_Address,
            'std_phone': student.std_phone,
            'Email': student.Email,
            'faculty': student.faculty,
            'parents_name': student.parents_name,
            'parents_phone': student.parents_phone,
            'sex': student.sex
        }
    except StudentRegistration.DoesNotExist:
        data = {'code': 404, 'msg': '学生ID不存在'}
    return JsonResponse(data)

# 员工信息查询接口
def get_staff_info(request):
    staff_id = request.GET.get('id')
    try:
        staff = StaffRegistration.objects.get(Id=staff_id)
        data = {
            'code': 200,
            'Name': staff.Name,
            'Address': staff.Address,
            'Email': staff.Email,
            'phone': staff.phone,
            'sex': staff.sex
        }
    except StaffRegistration.DoesNotExist:
        data = {'code': 404, 'msg': '员工ID不存在'}
    return JsonResponse(data)

接着在app的urls.py中注册这两个接口的路由：

from django.urls import path
from . import views

urlpatterns = [
    # 你原来的其他路由保留，新增下面两个
    path('get-student-info/', views.get_student_info, name='get_student_info'),
    path('get-staff-info/', views.get_staff_info, name='get_staff_info'),
]

2. 表单字段添加ID标识 #

你使用bootstrap_form渲染表单时，给每个需要填充的字段添加自定义ID属性，方便JS选择元素，以学生表单为例：

{% load bootstrap_form %}
<form method="post">
    {% csrf_token %}
    {{ form.Id|bootstrap_form_field attrs={"id": "student_id_input"} }}
    {{ form.StudentName|bootstrap_form_field attrs={"id": "student_name_input"} }}
    {{ form.Std_Address|bootstrap_form_field attrs={"id": "student_addr_input"} }}
    <!-- 其他需要填充的字段都按上面的格式添加对应的id属性 -->
    <button type="submit" class="btn btn-primary">提交</button>
</form>

3. 添加JS交互逻辑 #

在表单所在模板的底部添加JS代码，监听ID输入框的失焦/输入事件，请求后端接口拿到数据后自动填充到对应字段：

<script>
// 学生表单自动填充逻辑
document.getElementById('student_id_input').addEventListener('blur', function() {
    const studentId = this.value.trim();
    if (!studentId) return;
    
    // 请求后端接口，注意替换路径里的app前缀为你自己app的路由前缀
    fetch(`/your-app-prefix/get-student-info/?id=${studentId}`)
    .then(res => res.json())
    .then(data => {
        if (data.code === 200) {
            // 填充对应字段
            document.getElementById('student_name_input').value = data.StudentName;
            document.getElementById('student_addr_input').value = data.Std_Address;
            // 其他字段按这个格式依次填充即可
        } else {
            alert(data.msg);
        }
    })
})

// 员工表单的逻辑和上面完全一致，修改对应接口地址和字段ID即可
</script>

注意事项 #

你现有模型中的Id = models.ForeignKey(unique=True)存在语法错误，ForeignKey必须指定关联的外键模型，如果你需要的是自增主键ID，直接修改为Id = models.AutoField(primary_key=True)即可。

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