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

Question

У меня есть форма с несколькими полями, первое из которых заключается в том, что человек вводит свой идентификационный номер, который привязан к отдельной модели для проверки. Я сделал эту функцию get_employee_name , которая возвращает имя на основе идентификатора другой модели, но я не уверен, как отобразить его на странице, прямо вверху, без обновления после вкладок человека/ щелкает? Я не слишком знаком с html, но я читал ajax-запрос GET, но я не уверен, как подойти к этому.

Это в основном, чтобы человек знал, что ID #они вводят совпадения со своим именем, прежде чем продолжить заполнять остальные.

views.py

class EnterExitArea(CreateView):
    model = EmployeeWorkAreaLog
    template_name = "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, work_area=area, station_number=station).update(time_out=datetime.now())
            return HttpResponseRedirect(self.request.path_info)


def get_employee_name(request):
    adp_number = request.POST.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):
    employee_name = models.CharField(max_length=25)
    adp_number = models.ForeignKey(Salesman, on_delete=models.SET_NULL, help_text="Employee #", null=True, blank=False) #(max_length=50, help_text="Employee #", blank=False)
    ...

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

enter_exit_area.html

{% extends "base.html" %}
{% block main %}
    <form id="warehouseForm" action="" method="POST" data-stations-url="{% url 'operations:ajax_load_stations' %}" 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>

{% endblock main %}

Answer 1

Похоже, у вас есть несколько вопросов, и вы должны их разделить, но просто для того, чтобы ответить на главный вопрос в заголовке: «Как отобразить запрос поля, не обновляя страницу?», Вот как вы выполняете эту часть с некоторым DOMманипуляция. Это базовый HTML и JavaScript, который вы должны вписать в свой проект.

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

var clickMe = function() {
  var element = document.getElementById('heading');
  
  // Do your AJAX and lookup something...
  element.textContent = "Name Lookup From Server Request";
}

<div>
  <h1 id="heading"></h1>
  <button onclick="clickMe()">Click Me</button>
</div>

Answer 2

Мы будем использовать ajax с jQuery, поэтому убедитесь, что у вас есть jQuery, прежде чем читать.

сначала вам нужно создать конечную точку для GET , перейдите по адресу urls.pyи добавьте конечную точку, скажем

path('/myserver/getID/', views.get_employee_name, name="whatever")

, теперь это вызывает get_employee_name верно? Давайте теперь вызовем его в JS без обновления.

вот основной синтаксис ->

$.ajax({THIS IS A SIMPLE DICT})

ajax принимает параметры

• type, который является типом запроса
• url - это URL-адрес запроса, который мы только что сделали выше (не полный URL-адрес, вы указываете конечную точку, с которой вы находитесь на веб-сайте, поэтому вы просто используете /myserver/getID/)
• также требуется data, который представляет собой словарь с вашими опубликованными данными (да, словарь внутри большего словаря ajax
• it CAN take success, который является функцией длявызовите после получения ответа со статусом 200 (успех), и эта функция успеха может иметь параметр response, который является вашим ответом
• it CAN take error, который является функцией, которая получаетвызывается после ошибки и принимает error в качестве аргумента

достаточно разговоров ...

$.ajax({
    url: 'myserver/getID',
    type: 'GET',
    data: // don't specify this, we're not posting any data,
    success: function (response) {console.log(response.data)}, //this will be what returned from python
    error: function (error){console.log(error)}
})

это простой запрос ajax

ПРИМЕЧАНИЕ, если вы вернете редирект из python и примете его из ajax, он не будетработать, ajax не может перенаправить, обязательно помните, что в большинстве случаев люди спрашивают, почему redirect('mylink') не работает после того, как я возвращаю его из ajax.

Другой ПРИМЕЧАНИЕ при работе с почтовыми запросами с помощью ajax вы должны включить токен csrf, который может быть включен

csrfmiddlewaretoken: '{%csrf_token%}'

Вы можете использовать Fetch API, если хотите, или даже обычный XMLhttprequest.