ajax调用后如何渲染Django模板答案

【问题标题】：How to render Django template after ajax callajax调用后如何渲染Django模板
【发布时间】：2022-01-10 12:29:04
【问题描述】：

我正在构建一个应用程序，该应用程序根据用户单击的选项呈现一组卡片，我在选项单击时使用 ajax，这样卡片就会出现而无需重新加载页面，但问题是我无法将卡片渲染到我的页面中，我正在使用 return render(request,'base.html',{'context':context}) 将计算值作为 django 上下文传递给前端

阿贾克斯：

<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 的新手

【问题讨论】：

Ajax 不刷新页面或特定的 html 元素，如果您想更新数据或想要呈现卡片，您必须手动附加来自后端的数据的卡片元素
当我使用JsonResponse 时，我的数据在这里success: function(data)，但我不知道如何将其附加到卡上
您能否在浏览器的控制台中记录您的 JsonResponse，并通过 edit 将该响应放入您的问题中
嘿，我更新了

标签： jquery django ajax

【解决方案1】：

第一种方法：

您可以将字典作为响应返回并像这样在 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>

第二种方法：

您可以从视图中返回 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>

【讨论】：

谢谢它成功了！