Django - 使用ajax数据更新页面

时间:2013-08-23 09:53:22

标签: javascript jquery python ajax django

[编辑更清晰] 我的问题更多的是一个架构问题,我想到了很多方法可以做我需要的但却无法弄清楚哪一个是正确的/最好的,所以就是这样。

我使用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 %}

我已经查看了其他问题,但通常会使用数据库中的数据进行更新。对不起,如果问题太具体,但我想在开始编写代码之前真正有一个好的问题设计,我有点迷失。谢谢。

2 个答案:

答案 0 :(得分:0)

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

为什么不使用某种基于Javascript的渲染库来做到这一点?由于您不需要执行额外请求,因此您的应用程序将执行得更快。

答案 1 :(得分:0)

第一次呈现模板时,会解析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>