如何使用Ajax，Jinja，django和django rest框架更新模板object_list

Question

这是我第一次使用django进行大型项目，也是第一次使用ajax。

我想每隔x秒使用jquery使用ajax更新客户端名称列表。 我找到了一些解决方案，但没有找到适合我项目的解决方案...

我的JQuery和Ajax：

setInterval(function(){
console.log('Data passed:');   
    $.ajax({
    url: '/dashboard/ajax/reload_data/',
    success: function (data){
        console.log(data);
       }
    });
},10000)

我的观点：

def reload_data(request):
    if request.is_ajax():
        b = Jobs.objects.order_by('end_time').reverse()[:10]
        u = Update.objects.values('nome_cliente').distinct()
        serializerB = JobsSerializer(b, many=True)
        serializerU = UpdateSerializer(u, many=True)
        content = {"backup_info": serializerB.data, "update_info": serializerU.data}
    data = json.dumps(content)
    return HttpResponse(data, content_type='application/json')
else:
    raise Http404

我的模板代码：

<div id ="update">
        <div id="dash1div">
            <a href="">
                <strong>Updates</strong>
            </a>
        </div>
        <ul>
        {% for update_info in update_info %}
            <style type="text/css">
                 #{{update_info.nome_cliente}}:visited, #{{update_info.nome_cliente}}:hover,  #{{update_info.nome_cliente}}:focus,  #{{update_info.nome_cliente}}:active,  #{{update_info.nome_cliente}}{
                    text-decoration:none;
                    color:#B1EBF9;
                    font-size: 1em;
                    outline: 0;
                }                       
            </style>    
            <li>
                <a id = "{{update_info.nome_cliente}}" href="/dashboard/ListUpdate/{{update_info.nome_cliente}}/">{{update_info.nome_cliente}}</a>
            </li>
        {% endfor %}
    </ul>
</div>  

我已经在接收数据，但是如果不刷新页面就无法更改模板信息（无效）！

Answer 1

为了解决这个问题，我使用jQuery刷新数据并编写一些CSS内联！ 它看起来像这样：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1 /jquery.min.js"></script>
<script type="text/javascript">
setInterval(function(){
console.log('Data passed:');   
    $.ajax({
        type: 'GET',
        cache: true,
        url: '/dashboard/ajax/reload_data/',
        success: function (data){
            console.log(data);
            var update_info = data['update_info'];
            console.log(update_info.length);
            $('#ajax_updated').empty()
            for (var i = 0; i < update_info.length; i++)
            {
                $('#ajax_updated').append("                     <style type=\"text/css\">#" + update_info[i].nome_cliente + ":visited, #" + update_info[i].nome_cliente + ":hover,  #" + update_info[i].nome_cliente + ":focus,  #" + update_info[i].nome_cliente + ":active,  #" + update_info[i].nome_cliente + "{text-decoration:none; color:#B1EBF9; font-size: 1em; outline: 0;}</style>");
                $('#ajax_updated').append("<li><a id = \"" + update_info[i].nome_cliente + "\" href=\"/dashboard/ListUpdate/" + update_info[i].nome_cliente + "/\">" + update_info[i].nome_cliente + "</a></li>");

            }
        },
        error: function(data) {
               alert("Got an error dude... " + data);
           },
        });
    },5000)