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

【问题标题】：How to render a field request without refreshing the page?如何在不刷新页面的情况下呈现字段请求？
【发布时间】：2019-10-31 14:27:42
【问题描述】：

我有一个包含几个字段的表单，第一个是一个人输入他们的 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 %}

【问题讨论】：

见developer.mozilla.org/en-US/docs/Web/API/Fetch_API
您可能应该缩小问题的范围，并将其拆分为多个。 AJAX/Fetch 是您正在做的事情的一部分，也是迄今为止人们关注的事情 - 但问题标题是关于在 DOM 中呈现文本而不刷新页面的问题，答案非常简单。

标签： html

【解决方案1】：

我们将使用 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 字典中的字典
它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处理post请求时，必须包含csrf令牌，该令牌可以被

csrfmiddlewaretoken: '{%csrf_token%}'

如果需要，您也可以使用 Fetch API，甚至可以使用普通的XMLhttprequest。

【讨论】：

只是不要忘记字典项目之间的逗号，否则世界会爆炸

【解决方案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>

【讨论】：