Javascript 如何在Django中单击/标记出字段后呈现名称？

我有一个表格，用于记录员工何时进入/离开某个区域以跟踪时间。第一个字段是他们输入员工的位置。我的数据库中有一个表，它来自另一个名为saller的模型，其中存储了所有员工数据（姓名、部门等），如下所示（仅显示与问题相关的字段）：

alldata/models.py

class Salesman(models.Model):
    slsmn_name = models.CharField(max_length=25)
    id = models.IntegerField(db_column='number', primary_key=True)
    ...

    def __str__(self):
        return ""

class EmployeeWorkAreaLog(TimeStampedModel, SoftDeleteModel, models.Model):
    employee_number = models.ForeignKey(Salesman, on_delete=models.SET_NULL, help_text="Employee #", null=True, blank=False)
...

class WarehouseForm(AppsModelForm):
    class Meta:
        model = EmployeeWorkAreaLog
        widgets = {
            'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}),
        }
        fields = ('employee_number', 'work_area', 'station_number')

    def clean_employee_number(self):
        employee_number = self.cleaned_data.get('employee_number')
        if employee_number is None:
            raise forms.ValidationError("Must enter emp #")
        elif employee_number.team not in ('WF', 'WP', 'OM') or employee_number.employee_status not in 'A':
            raise forms.ValidationError("Employee not valid, please contact manager")
        return employee_number

设置表单的我的模型，以便员工编号字段与销售人员相关，以便在我的表单中输入的数字只能是基于id在销售人员中有效的数字，以便我可以筛选“谁”可以提交表单或不提交表单（取决于团队/状态）

型号.py

class Salesman(models.Model):
    slsmn_name = models.CharField(max_length=25)
    id = models.IntegerField(db_column='number', primary_key=True)
    ...

    def __str__(self):
        return ""

class EmployeeWorkAreaLog(TimeStampedModel, SoftDeleteModel, models.Model):
    employee_number = models.ForeignKey(Salesman, on_delete=models.SET_NULL, help_text="Employee #", null=True, blank=False)
...

class WarehouseForm(AppsModelForm):
    class Meta:
        model = EmployeeWorkAreaLog
        widgets = {
            'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}),
        }
        fields = ('employee_number', 'work_area', 'station_number')

    def clean_employee_number(self):
        employee_number = self.cleaned_data.get('employee_number')
        if employee_number is None:
            raise forms.ValidationError("Must enter emp #")
        elif employee_number.team not in ('WF', 'WP', 'OM') or employee_number.employee_status not in 'A':
            raise forms.ValidationError("Employee not valid, please contact manager")
        return employee_number

forms.py

class Salesman(models.Model):
    slsmn_name = models.CharField(max_length=25)
    id = models.IntegerField(db_column='number', primary_key=True)
    ...

    def __str__(self):
        return ""

class EmployeeWorkAreaLog(TimeStampedModel, SoftDeleteModel, models.Model):
    employee_number = models.ForeignKey(Salesman, on_delete=models.SET_NULL, help_text="Employee #", null=True, blank=False)
...

class WarehouseForm(AppsModelForm):
    class Meta:
        model = EmployeeWorkAreaLog
        widgets = {
            'employee_number': ForeignKeyRawIdWidget(EmployeeWorkAreaLog._meta.get_field('employee_number').remote_field, site, attrs={'id':'employee_number_field'}),
        }
        fields = ('employee_number', 'work_area', 'station_number')

    def clean_employee_number(self):
        employee_number = self.cleaned_data.get('employee_number')
        if employee_number is None:
            raise forms.ValidationError("Must enter emp #")
        elif employee_number.team not in ('WF', 'WP', 'OM') or employee_number.employee_status not in 'A':
            raise forms.ValidationError("Employee not valid, please contact manager")
        return employee_number

我需要的帮助是，能够在html中显示员工姓名，就在他们输入员工姓名的上方#一旦他们在字段外单击离开/制表符，同样的方式，在您键入您想要的用户名并进入下一个字段后，会显示“Username‘whatever’is take”消息，页面快速交叉检查数据库，查看名称是否存在并呈现它

我没有AJAX/JS脚本/请求方面的经验（也没有太多python方面的经验，我一直在努力解决这个问题），但我尝试创建一个函数，在views.py中从saller返回名称，如下所示

def get_employee_name(request, id):
    employee = get_object_or_404(Salesman, id=id)
    return HttpResponse(employee.slsmn_name)

---

但我不知道如何让它在我的页面的HTML中呈现/显示。我在想，也许可以通过检查输入的数字长度是否为6，然后触发对姓名的请求（所有员工编号都有6位数字）。对于如何实现这一点的任何指导/建议，我们将不胜感激

通过上下文词典传递它

def Detail(request, slug):
        employee = get_object_or_404(Salesman, id=id)
        context = {
            'employee' : employee,
        }
        return render(request, 'blog/blog_detail.html', context)

这是一个返回HTML模板的视图。

在模板中，可以使用以下命令添加名称

<h1>{{employee.slsmn_name}}</h1>

{{employee.slsmn_name}

也就是说，一旦用户输入了号码，就会对其进行更新。如果您希望它在不发送其他请求的情况下进行更新，则必须使用JS。我建议使用Vue.js，因为它很简单，并且在Django中运行良好，但是如果您担心较旧的浏览器，纯js非常适合。要使此功能在没有ajax的情况下工作（我更喜欢axios用于小型应用程序），您需要

通过setter“onload”功能传递所有员工的列表 附加到主体并将此列表存储在JS文件中

将员工id的输入绑定到js文件中的变量

对员工列表进行排序，以找到匹配的对象

然后绑定dom元素的内部HTML，该元素应包含员工姓名，并使innerhtml=name

---

这使得无需API调用就可以实现，但如果你有数千名员工，这将大大降低你的网站速度。这是一个非常简单的JS，不需要高级知识，但却是基础知识的一个很好的实现

您已经在使用JS框架了吗？