应当在innerHTML中使用django render_to_string响应吗?

时间:2019-04-25 23:52:59

标签: javascript django

首先让我说这是我的第一个Django项目,所以请考虑我做一些根本错误的事情的可能性。

我正在处理一个将在HTML表格中显示报告的网页。我认为我用来获取数据和构建表的过程太复杂了。它有效,但是我认为可能有更好的方法。任何建议表示赞赏。

这时,我有一个Django项目,该项目由一个网页和基本的Django基础结构组成。该页面为用户提供了一些控制报告的选项和一个用于开始生成报告的按钮。

启动报告生成时,会对URL(通过Django)路由到视图的URL进行XMLHTTPRequest。该视图调用API来检索数据,并对数据进行一些Python处理。然后,它使用数据和使用django_tables2渲染表的模板调用render_to_string函数。它将render_to_string响应(包装在HttpResponse中)返回到报告网页。

报告网页将表innerHTML设置为XMLHTTPRequest responseText。

以下是更为简洁的流程:

  1. 用户点击“生成报告”
  2. “报告”页面发出一个XMLHTTPRequest,该XMLHTTPRequest被路由到视图。
  3. View从API下载数据,在Python中进行一些中等复杂的处理,然后使用render_to_string调用和django_tables2将其呈现为字符串。
  4. 该视图返回render_from_data响应(表HTML)。
  5. 报告网页设置表的innerHTML = XMLHTTPRequest responseText。

在我看来这很令人费解,但这是我发现生成表的最简单方法。从API返回的数据需要重新构建才能适合报告。在Python中这样做更容易,因此这就是使用视图进行重构的原因。

谢谢。

生成表格html的Django模板:

{% load render_table from django_tables2 %}
{% render_table report_details %}

加载网址以获取表格html的html代码:

    <div><table id=report visibility="none"></table></div>
    <body>
        <script>

                function load_table ()
                {
                        var xhttp = new XMLHttpRequest();
                        xhttp.onreadystatechange = function()
                        {
                                if (this.readyState == 4 && this.status == 200)
                                {
                                        table_element = document.getElementById ("report");
                                        table_element.innerHTML = this.responseText;
                                        table_element.style.visibility = "visible";
                                }
                        };
                        xhttp.open("GET", "http://host:8000/reports/get_report_table", true);
                        xhttp.send();
                }

1 个答案:

答案 0 :(得分:0)

我认为我找到了一种更好的方法。

表呈现模板位于“%if%”块中。仅当报告数据可用时才执行“%if%”块。

{% if generate_report %}
{% render_table report_details %}
{% endif %}

当操作员单击“生成报告”按钮时,代码将设置一些参数(基本上是报告过滤器)并执行:

window.location.search = date_filter + "&" + filter + "generate_report=true";   

如果“ generate_report”参数为true,则原始报告页面的url路径/视图将处理检索和格式化报告数据。

这样就不需要:

  1. 用于获取报告数据的XMLHTTPRequest。
  2. 用于路由调用以获取表数据的URL路由。
  3. 用于构造表数据的第二个“视图”。
  4. 设置innerHTML值。

我确定还有改进的空间。任何建议表示赞赏。

谢谢。