@nurzhannogerbek

Как загружать данные в фоновом режиме через AJAX?

Здравствуйте, посоветуйте пожалуйста в каком направлении копать...

Есть дерево, которое в своем Django проекте отображаю в шаблоне следующим образом. Во вьюхе формирую документы верхнего уровня, то есть документы у которых нет предков. Далее посылаю эти документы в шаблон, проверяю каждый документ на наличие у него детей и так рекурсивно повторяется. Само дерево строится правильно и при открытии страницы все ветки закрыты изначально. Проблема в том что данных много и страница открывается 4-6 секунд пока все не подгрузится, что не совсем хорошо. В терминале вижу что основная нагрузка происходит когда проверяю есть ли дети.

ВОПРОС: Возможно ли как-то в фоновом режиме через AJAX или еще как-то подгружать/вставлять детей в блок который выделил (см. ниже)?!

main.html:
<ol class="dd-list">
{% for document in documens %}
    {% include "tree_template.html" %}
{% endfor %}
</ol>


tree_template.html:
<li class="dd-item dd3-item" data-id="{{document.id}}">
    <div class="dd-handle dd3-handle"></div>
    <div class="dd-content dd3-content">***</div>

    {% if document.get_children %}
    <ol class="dd-list">
        
        <!-- START: Блок который хочется подгружать в фоновом режиме -->
        {% for child in document.get_children %}
            {% with document=child template_name="tree_template.html" %}
                {% include template_name %}
            {% endwith %}
        {% endfor %}
        <!-- END: Блок который хочется подгружать в фоновом режиме -->
    
    </ol>
    {% endif %}
</li>
  • Вопрос задан
  • 279 просмотров
Пригласить эксперта
Ответы на вопрос 1
igorfedun
@igorfedun
full-stack python developer
вот неплохая статья как формировать Ajax запросы
https://simpleisbetterthancomplex.com/tutorial/201...

Вот пример из реального проекта. Тут идет удаление элементов из DOM. Аналогично можно сделать и добавление.
$(".remove-from-basket").click( function () {
$.ajax( {
headers: { "X-CSRFToken": getCookie("csrftoken") },
type: "post",
url: "{% url 'basket_widget_delete_object' %}",
dataType: "json",
data: {"remove_object_id": $(this).attr("id")},
success: function(data) {
var element = "#basket-content-table tr#" + data.removed_id;
$(element).remove();
}
});
})
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы