从Django服务器获取Bootstrap表的JSON数据

Question

我正在尝试从Json响应的Django服务器获取Bootstrap表的数据：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-table.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-table.min.js"></script>

    <table class="table table-striped" id="table"
        data-toggle="table"
        data-url="https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"
        #data-url="http://totoshick.pythonanywhere.com/getdata"
        data-side-pagination="server">
        <thead>
            <tr>
                <th data-field="id">#</th>
                <th data-field="name">Report name</th>
                <th data-field="description">Description</th>
                <th data-field="link">Link</th>
                <th data-field="start_date">Last launch</th>
            </tr>
        </thead>
    </table>

来自引导表example的数据：https://examples.wenzhixin.net.cn/examples/bootstrap_table/data

我的数据：http://totoshick.pythonanywhere.com/getdata

该表成功显示了示例中的数据，但没有显示我的数据-“未找到匹配的记录”。我的数据的本地变量：

{
  "total": 5,
  "totalNotFiltered": 5,
  "rows": [
    {
      "id": 1,
      "name": "name1",
      "description": "descr1",
      "link": "link1",
      "start_date": "2019-09-26T14:04:18Z"
    },
    {
      "id": 2,
      "name": "name2",
      "description": "descr2",
      "link": "link2",
      "start_date": "2019-09-26T14:04:37Z"
    },
    {
      "id": 3,
      "name": "name3",
      "description": "descr3",
      "link": "link3",
      "start_date": "2019-09-26T14:04:50Z"
    },
    {
      "id": 4,
      "name": "name4",
      "description": "descr4",
      "link": "link4",
      "start_date": "2019-09-26T14:05:30Z"
    },
    {
      "id": 5,
      "name": "name5",
      "description": "descr5",
      "link": "link5",
      "start_date": "2019-09-26T14:05:46Z"
    }
  ]
}

根据documentation，BT可使用两种类型的json数据。我尝试了两种变体（均未成功），但我的目标是服务器端。

Django view.py代码：

from django.http import JsonResponse
from django.forms.models import model_to_dict
from .models import Report


def send_data(request):
    reports = Report.objects.all().order_by('start_date')
    serialized_queryset = {"total": reports.count(),
                           "totalNotFiltered": reports.count(),
                           "rows": []}
    for report in reports:
        temp = model_to_dict(report)
        serialized_queryset["rows"].append(temp)

    return JsonResponse(serialized_queryset, json_dumps_params={'indent': 2}, safe=False)
    #return JsonResponse(serialized_queryset["rows"], json_dumps_params={'indent': 2}, safe=False)

Browser gets the json data correctly

我不知道问题隐藏在哪里，因为示例中的json格式与我的相同。有谁知道怎么了？

Answer 1

您发布的代码段执行了来自JavaScript的跨域请求。使用CORS可以进行跨域请求，这必须由服务器端支持。

示例链接支持CORS，但您的Django应用程序不支持。如果您使用的是Chrome调试工具，则会看到相应的错误消息。