在 Django 中单击/跳出字段后如何呈现名称？答案

【问题标题】：How to render a name after clicking/tabbing out of a field in Django?在 Django 中单击/跳出字段后如何呈现名称？
【发布时间】：2020-03-16 17:38:59
【问题描述】：

我有一个表单，用于跟踪员工何时进入/离开某个区域以跟踪时间。第一个字段是他们输入员工编号的地方。我的数据库中有一个来自另一个模型的表，称为 Salesman，其中存储了所有员工数据（姓名、部门等），如此处所示（仅显示与问题相关的字段):

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 ""

我的表单模型设置为 employee_number 字段与 Salesman 相关，因此在我的表单中输入的数字只能是基于 在 Salesman 中有效的数字id 以便我可以过滤“谁”可以提交表单（取决于团队/状态）。

models.py

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

forms.py

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 中显示他们输入员工的位置顶部的人名，就像“用户名'whatever' is taken”消息显示在您在某处输入您想要的用户名后，一旦您进入下一个字段，页面会快速交叉检查数据库以查看名称是否存在并呈现。

我没有使用 AJAX/JS 脚本/请求的经验（也没有太多使用 python 的经验，我一直在弄清楚这一点），但我尝试创建一个函数，从 views.py 中的 Salesman 返回名称像这样

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

但我不确定如何让它在我的页面的 HTML 中呈现/显示。我在想也许可以通过检查输入的号码的长度是否为 6，然后触发对姓名的请求（所有员工号码都有 6 位数字）。任何有关如何解决此问题的指导/建议表示赞赏！

【问题讨论】：

你已经在使用任何 JS 框架了吗？

标签： javascript python html django ajax

【解决方案1】：

通过上下文字典传递它。

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

这是一个返回 HTML 模板的视图。 here is the docs for templates

在模板中，您可以使用以下来添加名称。

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

也至于在输入数字后更新它。如果您希望它在不发送另一个请求的情况下更新，您将不得不使用 JS。我建议使用 Vue.js，因为它很简单，并且在 Django 中运行良好，但如果您担心旧版浏览器，纯 js 效果很好。要使此功能在没有 ajax 的情况下工作（我更喜欢将 axios 用于小型应用程序），您需要

通过设置器“onload”函数传递所有员工的列表附加到正文并将此列表存储在 JS 文件中。

将员工id的输入绑定到js文件中的一个变量
对员工列表进行排序以找到匹配的对象。
然后绑定应该包含员工姓名的dom元素的内部HTML，并使innerhtml = name。

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

【讨论】：