Как правильно выполнить этот запрос Ajax с Django?

Question

Я создал страницу с формой, в которой есть несколько полей из модели с именем EmployeeWorkAreaLog , первое поле, где человек вводит свой Employee #, который связан с отдельной моделью с именем Salesman, который имеет все основные данные для проверки. Я сделал эту функцию get_employee_name () , которая возвращает имя на основе Employee # из другой модели, но я не уверен, как отобразить его на странице, прямо наверх, без обновления после того, как человек вкладывает / щелкает в следующее поле в форме?

Я не слишком знаком с html, но я читал запрос ajax, но я не уверен, как подойти к этому. Ниже вы можете увидеть, что я пытался сделать, но я не уверен, как справиться с success или как правильно вставить это в html.

Это в основном, чтобы человек знал, чтоВведенный № сотрудника совпадает с его именем, прежде чем продолжить заполнять остальные.

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['adp_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(adp_number=emp_num).update(time_out=datetime.now())
            return HttpResponseRedirect(self.request.path_info)


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

models.py

class EmployeeWorkAreaLog(TimeStampedModel, SoftDeleteModel, models.Model):
    adp_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, help_text="Work Area", related_name="work_area")
    station_number = models.ForeignKey(StationNumber, on_delete=models.SET_NULL, null=True, help_text="Station", related_name="stations", blank=True)
    time_in = models.DateTimeField(help_text="Time in", null=True, blank=True)
    time_out = models.DateTimeField(blank=True, help_text="Time out", null=True)

    def __str__(self):
        return self.adp_number

forms.py

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

    def __str__(self):
        return self.adp_number

urls.py

urlpatterns = [
    url(r'enter-exit-area/$', EnterExitArea.as_view(), name='enter_exit_area'),
    path('ajax/get-employee-name', views.get_employee_name, name='ajax_get_employee_name'),
]

enter_exit_area.html

{% extends "base.html" %}

{% block main %}
    <form id="warehouseForm" action="" method="POST" get-employee-name-url="{% url 'operations:ajax_get_employee_name' %} novalidate >
        {% csrf_token %}

        <div>
            <div>
                {{ form.adp_number.help_text }}
                {{ form.adp_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>
        $("#id_adp_number").change(function () {
            var url = $("#warehouseForm").attr("get-employee-name-url");
            var adp_num = $(this).val();

            $.ajax({
                url: url,
                data: {
                    'adp_number': adp_num
                },
                success: function (response) {

                }
            });
        });
    </script>

{% endblock main %}

Ниже приведена часть модели, в которой хранятся все исходные данные. alldata / models.py

class Salesman(models.Model):
    slsmn_name = models.CharField(max_length=25)
    adp_number = models.IntegerField()

Answer 1

Почему бы вам не попробовать что-то в этом духе:

1) Добавить такой маршрут в urls.py

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

2) Вам нужноспособ ссылаться на поле формы номера ADP, поэтому присвойте ему атрибут HTML id в ваших models.py

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

    def __str__(self):
        return self.adp_number

(добавив attrs={'id':'adp_number_field'} внутри ForeignKeyRawIdWidget(), но неполностью уверен, что это правильное размещение.)

Вам также понадобится элемент HTML, который будет содержать и отображать имя сотрудника, поэтому где-то за пределами формы добавьте элемент HTML, например, такой: <p id='employee_name'></p>

3) Используйте AJAX для обнаружения изменения в поле ADP Number, как вы это сделали, и отправьте POST по указанному выше URL-адресу, который возвращает имя сотрудника.

        $("#adp_number_field").change(function () {
            var adp_num = $(this).val();
            var url = 'get-employee-name/' + adp_num;

            $.ajax({
                url: url,
                type:'post',    
                data: {
                    'adp_number': adp_num
                },
                success: function (data) {
                    employee_name = data;
                    $('#employee_name')[0].innerHTML = employee_name;
                }
            });
        });

Я не проверял ни одногоиз-за этого, это было не в моей голове, но здесь должно хватить, чтобы вы оказались на правильном пути.