Jquery 使用Ajax、Django将上下文传递到模板中

我有一个视图，我正试图显示来自几个不同地方的数据。我的想法是通过Ajax实现，因为在加载此页面时，我无法执行3或4个URL

我能够使用Django Rest框架将数据获取到页面，并且可以使用ajax请求在控制台中查看正确的数据。我只是不知道如何将这些数据输入到我的html模板中开始显示它。通常我只会通过视图传递上下文，但这是一个未知的领域

我认为Jquery缺少了一些非常小的东西，因为我对javascript和Jquery非常陌生

视图.py

class LoadLaneHistoricalCarriers(APIView):
    authentication_classes = ()
    permission_classes = ()

    def get(self, request, pk):
        load = Load.objects.get(pk=pk)
        load_state = load.shipper.state
        load_equipment_type = load.equipment_type

        historical_loads_in_state = Load.objects.filter(shipper__state=load_state)
        carriers = CarrierCompany.objects.filter(state=load_state)

        historical_carriers = []
        historical_loads = []

        for load in historical_loads_in_state:
            historical_loads.append(load.id)
            historical_carriers.append(load.carrier.name)

        data = {
        'historical_loads': historical_loads,
        'historical_carriers': historical_carriers

        }
        return Response(data)

模板这是一个重要的模式

<script>
  var endpoint = '/carrier_notifications/load/historical_carriers/400192/data/'
    $.ajax({
        method: "GET",
        url: endpoint,
        success: function (data) {
          carriers = data.historical_carriers
          console.log(carriers) //This works
        },
        error: function(error_data){
            console.log("error")
            console.log(error_data)
        }
      });
</script>

<table class="table table-condensed" id="historicalCarriers">
  <thead>
    <tr>
      <th>Load Number</th>

    </tr>
  </thead>
  <tbody>
    {% for carrier in carriers %}
    <tr>
      <td>
        <a href="#">{{ carrier }}</a>
      </td>
    </tr>
    {% endfor %}
  </tbody>
</table>

var endpoint='/carrier\u notifications/load/historical\u carriers/400192/data/'
$.ajax({
方法：“获取”，
url:endpoint，
成功：功能（数据）{
承运商=数据。历史_承运商
console.log（carriers）//这很有效
},
错误：函数（错误\u数据）{
console.log（“错误”）
console.log（错误\u数据）
}
});
装载数量
{承运人%中承运人的百分比}
{%endfor%}

您应该将响应作为Json对象返回

from django.http import JsonResponse

data = {
    'historical_loads': historical_loads,
    'historical_carriers': historical_carriers

    }
return JsonResponse(data)

jquery第一个选项（无需django for循环）：

var tbody=$（“tbody”）
$.ajax({
方法：“获取”，
url:endpoint，
成功：功能（数据）{
承运商=数据。历史_承运商
对于（var i=0；i

这是一个例子： 视图

template = loader.get_template('start_interview.html')
  context = Context({ 'upload_response': 'True'})
  return HttpResponse(template.render(context))

ajax

$.ajax({
  type: "POST",
  url: "<your url to the view that returns appropriate template>",
  data: { name: "Tegito123", location: "New York" }
}).done(function( responseMsg ) {
  $('#notifier').html(responseMsg)
});

---

关于ajax的更多信息

您能告诉我您的模式是哪种模板吗？它是否与您的端点共享同一模板？太棒了！这确实产生了我需要的东西。不过，我需要仔细检查并调整它，使其更好地适合我的用例。我显然有一些javascript需要学习。是否可以将数据传递给我的模板，以便我可以使用django for循环？我想访问更多的数据。我很高兴能提供帮助。当然，在我的示例中，您有一个名称数组，但您可能也希望有链接，只需为您的案例格式化格式良好的JSON对象即可。学习是关键。确切地说，我能够格式化每个名字的详细链接。我将处理这个问题，并对其进行进一步调整。如果模态与端点位于同一模板中，我知道一种方法。基本上，如果处理相同模板中的数据。。。您的模态在哪个模板中？它与您的端点共享相同的模板吗？我想做同样的事情，除了不使用一行代码之外，我有一个完整的HTML文档，它使用AJAX中接收的数据。我如何做到这一点？

$.ajax({
  type: "POST",
  url: "<your url to the view that returns appropriate template>",
  data: { name: "Tegito123", location: "New York" }
}).done(function( responseMsg ) {
  $('#notifier').html(responseMsg)
});

{%if upload_response %}
 ...Your html tags or jquery if inside script block...
{%else%}
 ...Do Stuff if it is false...
{%endif%}