Как обновить содержимое 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>