Html 如何在不刷新页面的情况下呈现字段请求？

我有一个带有几个字段的表单，第一个字段是一个人输入自己的ID#，该ID绑定到一个单独的模型进行验证。我创建了这个函数get_employee_name，它根据另一个模型的ID返回名称，但我不确定如何在页面顶部显示它，而不在人员选项卡/单击后刷新？我对html不太熟悉，但我读到一个ajax GET请求就可以了，但我不确定如何处理这个问题

这基本上是为了让这个人知道他们输入的ID与他们的姓名匹配，然后再继续填写其余的内容

视图.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

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

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

型号.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

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

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

forms.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

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

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

进入退出区域.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 %}

{%extends“base.html”%}
{%block main%}
{%csrf_令牌%}
{{form.adp_number.help_text}
{{form.adp_number}
{{form.work\u area.help\u text}
{{form.work_area}}
{{form.station\u number.help\u text}
{{form.station_number}
进入区域
离开区
{%endblock main%}

我们将使用ajax和jQuery，因此在阅读之前请确保您拥有jQuery

首先，您必须创建一个要获取的端点，转到url.py并添加一个端点

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

现在，这将调用

get\u employee\u name

对吗？现在让我们在JS中调用它而不刷新

以下是基本语法->

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

ajax接受参数

• 类型

  哪一种是请求类型

• url

  这是我们刚才发出的请求url（不是完整的url，您正在指定您在网站上的位置，因此您只需使用

  /myserver/getID/

  ）
• 它还需要

  数据

  ，这是一个包含已发布数据的字典（是的，是一个更大的ajax字典中的字典）
• 它可以获取

  success

  ，这是在获得状态为200（success）的响应后要调用的函数，该成功函数可以具有参数

  response

  ，这是您的响应
• 它可以接受

  错误

  ，这是一个在错误后被调用的函数，并将

  错误

  作为参数

说够了

$.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无法重定向，请务必记住，因为大多数时候人们都会问，在我从ajax返回重定向（'mylink'）后，为什么重定向（'mylink'）不起作用

另一个注意是在使用ajax处理post请求时，必须包含csrf令牌，该令牌可以由

csrfmiddlewaretoken: '{%csrf_token%}'

---

如果需要，您也可以使用fetchapi，甚至可以使用普通的

XMLhttprequest

我们将使用ajax和jQuery，因此请确保在阅读之前使用jQuery

首先，您必须创建一个要获取的端点，转到url.py并添加一个端点

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

现在，这将调用

get\u employee\u name

对吗？现在让我们在JS中调用它而不刷新

以下是基本语法->

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

ajax接受参数

• 类型

  哪一种是请求类型

• url

  这是我们刚才发出的请求url（不是完整的url，您正在指定您在网站上的位置，因此您只需使用

  /myserver/getID/

  ）
• 它还需要

  数据

  ，这是一个包含已发布数据的字典（是的，是一个更大的ajax字典中的字典）
• 它可以获取

  success

  ，这是在获得状态为200（success）的响应后要调用的函数，该成功函数可以具有参数

  response

  ，这是您的响应
• 它可以接受

  错误

  ，这是一个在错误后被调用的函数，并将

  错误

  作为参数

说够了

$.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无法重定向，请务必记住，因为大多数时候人们都会问，在我从ajax返回重定向（'mylink'）后，为什么重定向（'mylink'）不起作用

另一个注意是在使用ajax处理post请求时，必须包含csrf令牌，该令牌可以由

csrfmiddlewaretoken: '{%csrf_token%}'

---

如果需要，您也可以使用Fetch API，甚至正常的

XMLhttprequest

听起来您有一些问题，应该将它们分开，但只是为了回答标题中的主要问题，“如何在不刷新页面的情况下呈现字段请求？”，这是通过一些DOM操作来完成这一部分的方法。这是项目中需要的基本HTML和JavaScript

从查找中获得名称后，只需将值插入DOM，即可呈现该名称，无需刷新。下面是一个简单的示例：

var clickMe=function（）{
var元素=document.getElementById（'heading'）；
//做你的AJAX和查找一些东西。。。
element.textContent=“从服务器请求查找名称”；
}

点击我

听起来你有几个问题，应该把它们分开，但只是为了回答标题中的主要问题，“如何在不刷新页面的情况下呈现字段请求？”，这是通过一些DOM操作来完成这一部分的方法。这是项目中需要的基本HTML和JavaScript

一旦从查找中获得名称，只需将该值插入DOM，即可呈现该名称，而无需刷新