如何在 AJAX 調用后更新 div 的內容

Question

我有一個 div（ <div class="card-body"> ），我想從數據庫中放入元素（通過 AJAX 調用檢索元素）

但是我需要一些動態的東西，因為我將動態添加內容，顯然 Django 模板標簽是不夠的。

我怎么能從 ajax 成功 function 做類似的事情？

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 function 時，我如何動態地“創建”這個部分：

<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>

Answer 1

動態部分需要用 javascript 來完成。

制作一個可以生成卡片的 function，並在將 output 解析為 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>