Datatables Ajax 在从文件中读取 JSON 时起作用，但从变量中读取 JSON 时不起作用（Django）

Question

我已经被这个问题困扰了几天了。我正在尝试将 JSON 数据提供给 DataTables，但它仅在我使用静态文件作为源时才有效（请参阅下面的 index.html）。

index.html

$(document).ready(function() {
    $('#mydata').DataTable( {

          "ajax": {
            "url": '{% static "myapp/supplier.json" %}',  //<= works
{#                    "url": '{{ suppliers_all }}',#}     //<=does not work
            "dataSrc": ""
          },
            "columns": [
                { "data": "name" },
                { "data": "classification" },
            ]
    } );
} );

views.py

def index(request):
    suppliers_all = Supplier.objects.all().values('name', 'classification')
    suppliers_all = json.dumps(list(suppliers_all))
    context = {'suppliers_all': suppliers_all,
               }
    return render(request, 'myapp/index.html', context)

JSON 输出：

[{"classification": "Base Supplier", "name": "Supplier Name1"}, {"classification": "Strategic Supplier", "name": "Supplier Name2"}]

当我使用 django 传递变量 {{ suppliers_all }} 浏览器调试返回 a 404 not found error。我尝试根据网站示例对 JSON 输出进行硬编码，尝试了许多不同的方法，但如果不直接从文件中获取，它将永远无法工作。

更新： 通过使用 JSON Httpresponse 和 url 创建新视图解决了问题

def supjson(request):
    suppliers_all = Supplier.objects.all().values('name', 'classification')
    suppliers_all = json.dumps(list(suppliers_all), cls=DjangoJSONEncoder)
    context = {'suppliers_all': suppliers_all,
    return HttpResponse(suppliers_all, content_type='application/json')

然后将 Ajax url 更改为以下内容：

                  "ajax": {
                    "url": '{% url 'myapp:supjson' %}',
                    "dataSrc": ""
                  },

虽然它有效，但我觉得它是多余的解决方案，因为我在直接通过变量传递数据时遇到问题。

更新 #2：问题是由于 Django 自动转义单个逗号导致 JSON 解析不起作用。我做了以下更改：

在views.py中添加了mark_safe

context = {'suppliers_all': mark_safe(suppliers_all),
           }

将 JSON 字符串化，然后在 index.html 模板中解析：

$(document).ready(function() {
var json=JSON.stringify({{ suppliers_all }});
    $('#mydata').DataTable( {
          "data": JSON.parse(json),

Answer 1

也许您不需要从 url 加载数据。如果您的数据已预加载，请尝试将其直接添加到 DataTable。

$(document).ready(function(){
    $('#mydata').DataTable({
        "data": JSON.parse('{{ suppliers_all }}'),
        "columns": [
            {"data": "name"},
            {"data": "classification"},
        ]
    });
});