Как правильно визуализировать поле из базы данных на странице без обновления?

Question

Я пытаюсь отобразить имя пользователя в верхней части окна, где они вводят свой Employee # в форму, без необходимости обновлять страницу, например, они вводят свой # и затем после того, как они нажимают / вкладку на следующемполе отображает имя сверху, поэтому пользователь знает, что он ввел правильную информацию. Это имя также хранится в отдельной модели, поэтому я пытаюсь получить его, используя «id / number».

Я не слишком знаком с AJAX, но после прочтения нескольких похожих вопросов это выглядит как запрос AJAX. будет наиболее подходящим способом для достижения этой цели. Я пытался создать функцию get_employee_name , которая возвращает имя человека, основываясь на том, как я видел, как работал другой запрос ajax, но я не уверен, как это реализовать, чтобы он отображался после ввода #.

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)
    work_area = models.ForeignKey(WorkArea, on_delete=models.SET_NULL, null=True, blank=False)
    station_number = models.ForeignKey(StationNumber, on_delete=models.SET_NULL, null=True,  blank=True)

    def __str__(self):
        return self.employee_number

Это модель, в которой хранится имя

alldata / models.py

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

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')

views.py

class EnterExitArea(CreateView):
    model = EmployeeWorkAreaLog
    template_name = "operations/enter_exit_area.html"
    form_class = WarehouseForm

    def form_valid(self, form):
        emp_num = form.cleaned_data['employee_number']
        area = form.cleaned_data['work_area']
        station = form.cleaned_data['station_number']

        if 'enter_area' in self.request.POST:
            form.save()
            return HttpResponseRedirect(self.request.path_info)

        elif 'leave_area' in self.request.POST:
            form.save()
            EmployeeWorkAreaLog.objects.filter(employee_number=emp_num, work_area=area, station_number=station).update(time_out=datetime.now())
            return HttpResponseRedirect(self.request.path_info)


def get_employee_name(request):
    employee_number = request.GET.get('employee_number')
    employee = Salesman.objects.get(employee_number=employee_number)
    employee_name = employee.slsmn_name
    return employee_name

urls. py

urlpatterns = [
    url(r'enter-exit-area/$', EnterExitArea.as_view(), name='enter_exit_area'),

    path('get-employee-name/<int:id>/', views.get_employee_name, name='employee_name'),
]

enter_exit_area.html

{% extends "base.html" %}

{% block main %}
    <form id="warehouseForm" action="" method="POST" novalidate >
        {% csrf_token %}
        <div>
            <h1 id='employee_name'></h1>
            <div>
                {{ form.employee_number.help_text }}
                {{ form.employee_number }}
            </div>
            <div>
                {{ form.work_area.help_text }}
                {{ form.work_area }}
            </div>
            <div>
                {{ form.station_number.help_text }}
                {{ form.station_number }}
            </div>
        </div>

        <div>
            <div>
                <button type="submit" name="enter_area" value="Enter">Enter Area</button>
                <button type="submit" name="leave_area" value="Leave">Leave Area</button>
            </div>
        </div>
    </form>

    <script>
        $("#employee_number_field").change(function () {
            var employee_number = $(this).val();
            var url = 'get-employee-name/' + employee_number;

            $.ajax({
                url: url,
                type:'post',
                data: {
                    'id': employee_number
                },
                success: function (data) {
                    employee_name = data;
                    $('#employee_name')[0].innerHTML = employee_name;
                }
            });
        });
    </script>
{% endblock main %}

employee_name.html

<h2>{{ employee_name }}</h2>