AJAX GET 请求成功； Django View 已更新，但 HTML 未更新答案

【问题标题】：AJAX GET request successful; Django View updated but HTML does not get updatedAJAX GET 请求成功； Django View 已更新，但 HTML 未更新
【发布时间】：2018-09-09 18:07:36
【问题描述】：

这完全把我难住了，我已经盯着屏幕看了很长时间了。
这是关于我正在尝试开发的邮件应用程序。我有一个 HTML 页面，它分为三个部分。左侧可以选中/取消选中从中查看电子邮件的文件夹。中间页面“应该”显示所有邮件（取决于左栏中选择的内容）。最右边的列是中间单个邮件的扩展视图。我添加了 AJAX GET 请求功能以传递以查看已选择或未选择的文件夹。视图可以正常获取 AJAX 请求（在下面的代码中，我打印出 args，这正是我想要的）。然而，HTML 页面/模板从不响应不断变化的参数！！我不知道为什么？请帮我找出程序中的错误。

urls.py

from django.conf.urls import url
from . import views


app_name="Home"
urlpatterns = [
    url(r'^$', views.Home_View.as_view(),name="Home"),
    url(r'^RightBody/$', views.RightBody, name="RightBody"),
    url(r'^RulePopUp/$', views.RulePopUp_View.as_view(), name="RulePopUp"),
    ]

views.py

class Home_View(View):

    def get(self, request):
        ExcludedFolder = request.GET.getlist('UncheckedFolder[]')
        LeftSide_FolderHandle = FolderTree("/SomePath/")
        LeftSide_Folder = LeftSide_FolderHandle.CreateFolderNames()
        LeftSide_Folder = LeftSide_FolderHandle.MakeAJSONtree()
        CompleteMailBox_Handle = MailLogger("/SomePath/",FoldersToExclude=ExcludedFolder)
        CompleteMailBox = CompleteMailBox_Handle.RecreateMailBox()
        # RightMail = FullMailInTheRight()
        args = {"CompleteMailBox":CompleteMailBox,
                "LeftSide_FolderStructure":LeftSide_Folder}
        print(args) ##This works
        return render(request,'Home_Query.html',args)

Home_Query.html

<!DOCTYPE html>
{% load static %}
<html>
  <head>
    <meta charset="utf-8">
    <title>Main Page</title>
    <script type="text/javascript" src="{% static 'js/jquery-3.2.1.js' %}"></script>
    <link rel="stylesheet" href="{% static 'css/HomePageMain.css' %}" type="text/css">
  </head>
  <body>
    <h1 class="Headline"> Mail checking app </h1>
    <br>
    <br>
    <div class="left-column">
      Select folders to display messages
      <br>
      <br>
{% include "Home_Query_LeftSide.html" with LeftSide_FolderStructure=LeftSide_FolderStructure %}
    </div>
    <div class="middle-column">
      Select Message to show complete mail on the right
      <br>
      <br>
      {% for eachMail in CompleteMailBox %}
        <div class="SingleMail">
            <span class="EachMailSender"> Sender: </span> <span class="MailSender">{{eachMail.0.Sender}}</span>, <span class="EachMailTime">Time: </span> <span class="MailTime">{{eachMail.0.Time}}</span> <br>
            <span class="EachMailSubject">Subject: </span> <span class="Subject">{{eachMail.0.Subject}}</span><br>
            <span class="EachMailBody"> Mail: </span>{{eachMail.1}}
            <div class="Rules">
              <p id="Rules">Click here for rules</p>
            </div>
        </div>
    {% endfor %}
    </div>
    <div class="right-column">
      This column shows the complete email when selected in the middle column
      <br>
      <br>
      <div class="FullMail">
      </div>
      <br>
      <br>
    </div>
  </body>
    <script type="text/javascript" src="{% static 'js/main.js' %}"></script>
</html>

main.js

var Unchecked = [];

$(function () {
    $("input:checkbox").click(function(){
      $(this).parent().find("input[type='checkbox']").prop('checked',$(this).is(':checked'));
      if ($(".left-column").find("input:checkbox:not(:checked)").length != 0){
        var UncheckedFolder = "";
        $(this).parent().find("input:checkbox:not(:checked)").each(function(){
          UncheckedFolder += "/"+String($(this).prop("id"));
        });
        if ($.inArray(UncheckedFolder, Unchecked) === -1) {Unchecked.push(UncheckedFolder)}
        var CheckedFolder = "";
        $(this).parent().find("input:checkbox:checked").each(function(){
          CheckedFolder += "/"+String($(this).prop("id"));
        });
        if ($.inArray(CheckedFolder, Unchecked) != -1) {Unchecked.splice($.inArray(CheckedFolder,Unchecked),1);}
        UncheckedFolder = "";
      }
      else {
        Unchecked = [];
      }
      console.log(Unchecked);
      $.ajax({
        type: 'get',
        url: "/Home/",
        datatype: "json",
        data: {
          'UncheckedFolder':Unchecked,
        },
        success: PrintMessage,
      });
    });
});

function PrintMessage(data,textStatus,jqXHR){
  console.log("Success To Exclude");
}

非常感谢！

【问题讨论】：

标签： python jquery html ajax django

【解决方案1】：

你很接近。返回 JsonResponse 而不是 render:

from django.http import JsonResponse

class Home_View(View):

    def get(self, request):
        ...
        print(args) ##This works
        return JsonResponse(args)

javascript 调用需要 json 格式的响应。使用render，您将返回一个 HTML 模板。

【讨论】：

谢谢。我处理了您的建议并将响应从 render 更改为 JsonResponse 并手动重新创建了 Ajax 成功调用中的页面（与 Django 的 render 方法呈现的页面相同）。但是我一直想知道为什么渲染不起作用。我想答案在钩子/中间件中。一旦 Ajax 启动 get 调用，它只等待 Jsonresponse 并且结果将仅传输到 Ajax 并且该调用必须完成。可能是渲染试图绕过中间件阻止的整个事情..但这一切都是我的猜测..我可能完全错了。谢谢