javascript - 如何使用 AJAX 刷新 Django 页面的一部分？

Question

我正在使用 Django 部署一个网站。有一个名为“论坛”的应用程序，支持我网站上的讨论论坛。

论坛的网址是'XXX.com/forum/roomY'。当用户单击刷新按钮时，我想在此页面上刷新一个 div id = ''chat''，其中包括一个消息列表。我想使用 AJAX 来做到这一点。

但我发现我无法调用函数 updatestatementlist(request) 来检索更新的消息列表，以便将其传递给此页面上的。

/forum/views.py def updatestatementlist(request):

log.debug("call statementlist function")
statements = Statement.objects.filter(discussion=discussion)
return render(request, 'forum/statementlist.html', {
    'statements': statements
    })

我看不到日志信息，所以我认为通过单击按钮我无法调用此函数。

论坛的主html页面是/forum/discussion.html，在template文件夹下。我按照建议将 div id = "chat"中的 html 代码提取到单独的 html /forum/statementlist.html here和其他几个 SO 帖子。

/forum/discussion.html

<button id = "Refresh"> Refresh </button>
<div id="chat">
{% include 'forum/statementlist.html' %}
</div>

/forum/statementlist.html

{% load mptt_tags %}
{% recursetree statements %}
    // display each statement
{% endrecursetree %}

forum.js

//When users click the refresh button
    $("#Refresh").on("click", function(event){
    alert("Refresh clicked")
    $.ajax({
        url: '',
        type: "GET",
        success: function(data) {
            alert("success")
            var html = $(data).filter('#chat').html();
            $('#chat').html(html);
        }
    });
});

我还在这个 AJAX 请求中尝试了一些其他的 url:{% url updatestatementlist %}, {% url 'updatestatementlist' %}。但后来我认为它应该设置为空，因为我不想被重定向到另一个 url。讨论论坛的 url 为“XXX.com/forum/roomY”，通过单击此页面上的刷新按钮，我只想刷新 div 并从服务器获取更新的语句列表。

顺便说一句，单击按钮后我可以看到两个警报。

/forum/urls.py

urlpatterns = [
...
url(r'^(?P<label>[\w-]{,50})/$', views.discussion_forum, name='discussion_forum'),
url(r'^(?P<label>[\w-]{,50})/$', views.statementlist, name='statementlist'),

]

/forum/views.py def discussion_forum() 用于在用户第一次到达该论坛时加载所有信息。

我想我的问题可能是 1) AJAX 错误； 2) url错误导致无法调用updatestatementlist()。

有人可以帮我吗？多谢!如果您需要任何其他信息，请告诉我!

包相关:

Django==1.9.3

django-mptt==0.8.7

Answer 1

在客户端，将你的请求头设置为X-Requested-With到XMLHttpRequest，Django使用这个特定的头来判断它是否是一个Ajax请求:

这是 Django 源代码的一个片段: https://docs.djangoproject.com/en/2.2/_modules/django/http/request/#HttpRequest.is_ajax

def is_ajax(self):
    return self.META.get('HTTP_X_REQUESTED_WITH') == 'XMLHttpRequest'

在定义了这个header之后，你需要在你的 View 函数中添加一个逻辑层。

def your_view_func(request, *args, **kwargs):
    if request.is_ajax():
        ...
        return render(request, <your_ajax_template>)
    return render(request, <your_normal_template>)

更新:

我更喜欢原始的 XMLHttpRequest API，如果您使用 Jquery，请添加 berforeSend 属性。

$.ajax({
  type: "GET",
  beforeSend: function(request) {
    request.setRequestHeader("X-Requested-With", "XMLHttpRequest");
  },
  ...
});

为什么 X-Requested-With 而不是 HTTP_X_REQUESTED_WITH？

请求中的 HTTP header 通过将所有字符转换为大写、将任何连字符替换为下划线并向名称添加 HTTP_ 前缀 来转换为 META 键。

https://docs.djangoproject.com/en/2.2/ref/request-response/#django.http.HttpRequest.META