Question

我有一个包含几个字段的表格，第一个是一个人输入其ID号的地方，该号码与一个单独的模型关联以进行验证。我创建了此函数 get_employee_name ，该函数根据其他模型的ID返回名称，但我不确定如何在页面顶部显示该名称，而无需刷新该人员分页/点击？我对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

我们将在jQuery中使用ajax，因此在阅读之前请确保您已经使用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/）< / li>
它还需要data，这是一本包含您发布的数据的字典（是在较大的ajax字典中的字典
它 CAN 接受success，这是在收到状态为200（成功）的响应后调用的函数，并且成功函数可以具有参数response，这是您的回应
它 CAN 使用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。

Answer 2

像您这样的声音有几个问题，应该将它们分开，而只是回答标题中的主要问题：“如何在不刷新页面的情况下呈现字段请求？”，这就是如何使用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>

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

2 个答案: