如何在 ajax 调用后呈现 Django 模板

Question

我正在构建一个根据用户点击的选项呈现一组卡片的应用程序，我在单击选项时使用 ajax 以便卡片在没有页面重新加载的情况下出现，但问题是我无法将卡片呈现到我的页面中，我正在使用 return render(request,'base.html',{'context':context})[= 将计算值作为 django 上下文传递给前端19=]

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: 已运行，因为我已尝试提供一些打印语句

我试过返回 jsonResponse，这是它的输出 {time:Array(14)}

请帮忙，因为我是 Ajax 和 Django

的新手

Answer 1

第一种方法：

您可以 return 字典作为响应并将其填充到 jQuery 中，如下所示：

from django.http import JsonResponse

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

并在 ajax 成功：

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

    return false;
}
</script>

第二种方法：

您可以 return 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>

如何在 ajax 调用后呈现 Django 模板

How to render Django template after ajax call

django

ajax

jquery