如何在AJAX调用后更新div的内容

Question

我有一个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>

Answer 1

动态部分需要用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>