Как обновить содержимое div после вызова AJAX

У меня есть div (<div class="card-body">) и я хочу поместить внутрь элементы из базы данных (элементы извлекаются через AJAX вызов)

Но мне нужно что-то динамическое, поскольку я буду добавлять контент динамически, и, очевидно, тегов шаблона Django недостаточно.

Как я могу сделать что-то подобное из функции успеха ajax?

index.html:

{% extends 'base_generic.html' %}
{% load static %}
{% block content %}
{% get_current_language as LANGUAGE_CODE %}
<script type="text/javascript">
    $(document).ready(function () {
        $.ajax({
            url: '/todo_ajax/',
            type: 'get',
            success: function(data) {
                alert(data);
            },
            failure: function(data) { 
                console.log('Got an error dude');
            }
        });
    });
</script>
<div class="wrapper">
    <!-- Index Content  -->
    <div id="content">
        <div class="row row-cols-1 row-cols-md-3 g-4 mb-5">
            <div class="col">
                <div class="card h-100">
                    <div class="card-header" id="toDoHeader">
                        ... (truncated)
                    </div>
                    <div class="card-body">
                        {% for o in some_list %}
                        <div class="cardItem cardItemIndex" class="mb-3">
                            <div class="row">
                                <div class="col">
                                    <h6 class="card-title">{{ o.title }}</h6>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col">
                                    <p class="card-text">{{ o.description }}</p>
                                </div>
                            </div>
                            <p class="card-text to-do-footer">{{ o.start_date }} - {{ o.end_date }}</p>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

views.py

@login_required
def todo_ajax(request):
    response = dict()
    if request.method == 'GET':
        to_do_list = ToDoList.objects.all().filter(user=request.user)
        data = serialize("json", to_do_list)
        return HttpResponse(data, content_type="application/json")
    return HttpResponse('')

models.py

from django.db import models
from django.contrib.auth.models import User

class ToDoList(models.Model):
    title = models.CharField(max_length=60)
    description = models.TextField()
    start_date = models.DateTimeField(null=True)
    end_date = models.DateTimeField(null=True)
    user = models.ForeignKey(
        User,
        null=True,
        blank=True,
        on_delete=models.SET_NULL,
    )

Другими словами, как я могу "создать" эту часть динамически, когда вызывается функция AJAX:

<div class="card-body">
    {% for o in some_list %}
    <div class="cardItem cardItemIndex" class="mb-3">
        <div class="row">
            <div class="col">
                <h6 class="card-title">{{ o.title }}</h6>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <p class="card-text">{{ o.description }}</p>
            </div>
        </div>
        <p class="card-text to-do-footer">{{ o.start_date }} - {{ o.end_date }}</p>
    </div>
    {% endfor %}
</div>

Динамическая часть должна быть сделана с помощью javascript.

Сделайте функцию, которая может генерировать карточки, и вызывайте ее после того, как вы разберете вывод как JSON

<script>
var cardItem = function(o) { 
    return `
    <div class="cardItem cardItemIndex" class="mb-3">
        <div class="row">
            <div class="col">
                <h6 class="card-title">` + o.title + `</h6>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <p class="card-text">` + o.description + `</p>
            </div>
        </div>
        <p class="card-text to-do-footer">` + o.start_date + ` - ` + o.end_date + `</p>
    </div>
    `;
}

    $(document).ready(function () {
        $.ajax({
            url: '/todo_ajax/',
            type: 'get',
            success: function(data) {
                data = JSON.parse(data);
                var cardItems = '';
                for(var i = 0; i < data.length; i++) {
                    cardItems += cardItem(data[i]);
                }
                $("#targetDiv").html('<div class="card-body">' + cardItems + '</div>');
            },
            failure: function(data) { 
                console.log('Got an error dude');
            }
        });
    });
</script>

<div id="targetDiv"></div>
Вернуться на верх