Как отрисовать шаблон Django после ajax-вызова

Я создаю приложение, которое отображает группу карточек на основе опций, на которые нажимает пользователь, Я использую ajax при нажатии на опцию, так что карточки появляются без перезагрузки страницы, но проблема в том, что я не могу отобразить карточки на странице, я передаю вычисленные значения во фронтенд как контекст django, используя return render(request,'base.html',{'context':context})

Ajax: 

<script>
function sendData(date){
  $.ajax({
    type : "POST", 
    url: "",
    data: {
      date : date,
      csrfmiddlewaretoken:'{{ csrf_token }}',
      click:'click'
    },

    });

    return false;
}
</script>

view.py:

def datepicker(request):
    if 'click' in request.POST:
        return render(request,'datepicker.html',{'dates':availabe_dates,'time':time})
    
    return render(request,'datepicker.html',{'dates':availabe_dates,'time':['choose a date']})

Я пробовал давать:

<div class="card-body">
 {% for t in time %}
    <p>{{t}}</p>
 {% endfor %}
</div>

Вместо карточек отображается только choose a date. Я уверен, что if 'click' in request.POST: выполняется, поскольку я пробовал давать некоторые операторы печати

Помогите пожалуйста, так как я новичок в Ajax и Django

Первый метод:

Вы можете вернуть словарь в качестве ответа и заполнить его в jQuery следующим образом:

from django.http import JsonResponse

def datepicker(request):
    if 'click' in request.POST:    
        return JsonResponse({'dates':availabe_dates,'time':time})

и в ajax success: 

<script>
function sendData(date){
  $.ajax({
    // rest of the code
    success: function(response){
      $.each(response.time, function (t) {
         $(".card-body").append(t);
      });
    }    
    });

    return false;
}
</script>

Второй метод:

Вы можете вернуть html из представления и добавить это в метод успеха ajax следующим образом:

from django.http import JsonResponse
from django.template.loader import render_to_string

def datepicker(request):
    if 'click' in request.POST:
        
        html = render_to_string('datepicker.html', {'dates':availabe_dates,'time':time})
        return JsonResponse(html, safe=False)

и в ajax: 

<script>
function sendData(date){
  $.ajax({
    // rest of the code
    success: function(response){
      $(".card-body").html(response);
    }    
    });

    return false;
}
</script>
Вернуться на верх