javascript - 在 GET 请求中使用 django 和 AJAX 在输入更改时立即更新页面元素

Question

我想更新页面中的元素，以实时告诉用户有多少对象将受到他们在表单中选择的条件的影响。

举个例子，表单要求输入一个数字，django 逻辑将删除任何带有 pk 的模型实例。单击提交按钮后小于该值 - 但在单击之前用户想知道他们将删除多少个:

<span id="number-changed">NULL</span> objects will be deleted

所以我想要的最终结果是#number-changed将由类似 MyModel.objects.filter(pk__lt=input_number).count() 的值填充.

我已经针对 input 的更改设置了 AJAX 调用通过:

 $("input").change( function() {
    $.ajax({
        type: "GET",
        url: "{% url 'myapp:bulkdelete' %}",
        data: {
            csrfmiddlewaretoken: $("input[name='csrfmiddlewaretoken']").val(),
        },
        success: function (data) {
        // code to update #number-changed
        }

我想知道如何在 View 中实现，以便成功 GET success函数可以使用我检索到的值。一些伪代码:

# views.py
class MyView(FormView):
    # ...
    def get(self, request, *args, **kwargs):
        input_number = ???  
        number_changed = MyModel.objects.filter(pk__lt=input_number).count()
        # presumably some super().get() call here
        return ???

问题:

我可以检索当前的 input_number通过request或者是否需要作为 url 传递发出 AJAX 请求时的参数？

如何添加我所需的信息，number_changed在本例中，返回 get()方法，以及如何在 success 中访问它？

我之前用django实现AJAX的方式是使用POST请求，我只需返回 JsonResponse与我所需的数据。然而，初始get()加载页面时调用，需要返回完整的HttpResponse - 所以最终有没有办法将我的附加信息添加到其中，或者我的做法完全错误。

Answer 1

从服务器的 Angular 来看，Ajax 请求与任何其他请求完全相同。您只需将数据包含在查询字符串中，然后通过 request.GET 字典在 View 中访问该数据。

jQuery 将从 data 参数为您生成查询字符串；请注意，GET 请求不需要 csrf token 。所以:

    type: "GET",
    url: "{% url 'myapp:bulkdelete' %}",
    data: {
        input_number: $(this).val(),
    },
    ...

在 View 中:

def get(self, request, *args, **kwargs):
    input_number = request.GET["input_number"]