Как обновить шаблон object_list, используя рамки отдыха ajax, jinja, django и django

Question

Я впервые делаю большой проект с django и впервые использую ajax.

Я хочу обновлять список имен клиентов каждые x секунд, используя ajax с jquery.Я нашел несколько решений, но не нашел решения, подходящего для моего проекта ...

Мой 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)