Django - 使用 ajax 数据更新页面

Question

[为更清晰而编辑] 我的问题更多是架构问题，我想了很多方法来做我需要做的事情，但不知道哪个是正确的/最好的，所以就在这里。

我使用 ajax 从远程 web 服务器获取一些 xml，然后用 jquery 解析它。我想要的是，当页面第一次呈现时，我有一些“正在加载”的 gif，一个用于我将要进行的每个 ajax 请求，然后当获取数据时，它会出现在页面上。

问题是我想让 jquery 将这些数据发布到视图以呈现它。 （这适用于将使用我的应用程序的其他开发人员，他们不太了解 javascript，更喜欢编写 python/html 来编写他们希望数据显示的方式并使用 django 模板引擎进行自定义标签和东西）

问题是如何区分第一次加载没有数据的页面和第二次加载有数据的页面。我不想随时刷新页面。我想在模板中添加一些内容，例如：

{% block content %}
{% if not data %}
it's the first loading of the page,we have to fetch the data.
<p> My first item : some loading logo </p>
<script>
call a static script that gets the data then appends it to the html/post it back.
</script>
{% endif %}
{% if data %}
the data had already been fetched so we can display it, something like : 
<p> My first item : {{first item}} </p>
{% endif %}
{% endblock %}

我查看了其他问题，但它通常使用数据库中的数据进行更新。抱歉，如果问题太具体，但我想在开始编写代码之前对问题进行良好的设计，我有点迷茫。谢谢。

Answer 1

为什么要将解析后的数据发送回服务器只是为了将其转换为Html？

为什么不直接使用某种基于 Javascript 的渲染库来做到这一点呢？您的应用程序会执行得更快，因为您不需要执行额外的请求。

Answer 2

第一次渲染模板时，会解析 Django 标记和上下文字典。 AJAX 用于在不重新加载页面的情况下发布/获取数据，因此在 AJAX 请求之后您的页面将不会重新加载 - 并且 django 模板渲染器将无法显示更新的数据。

但是您可以使用 jQuery get() 或 post() 从其他 django 视图中检索呈现的模板并将其集成到当前页面中。

此模板必须在 /ajax/fetch/ 上按请求呈现：

{% block content %}
{% if not data %}
    it's the first loading of the page,we have to fetch the data.
    <p> My first item : some loading logo </p>
    <script>
    call a static script that gets the data then appends it to the html/post it back.
    </script>
{% else %}
    the data had already been fetched so we can display it, something like : 
    <p> My first item : {{first item}} </p>
{% endif %}
{% endblock %}

这是在您的主页上：

<script [include jquery here]></script>
<script>         
    $(function(){
        $("#get_data_please").click(function(){
            $.get('/ajax/fetch/', function(data) {
                // this is called on ajax success
                $('#ajax_result').html(data);
            });
        });
    });
</script>
...
<a href="#" id="get_data_please">Click to get data</a>
<div id="ajax_result">
    Here all will be loaded
</div>