如何将 Ajax 加载的 JSON 数组从 Django/Python 视图加载到 DataTable答案

【问题标题】：How to load an Ajax loaded array of JSON from Django/Python view into DataTable如何将 Ajax 加载的 JSON 数组从 Django/Python 视图加载到 DataTable
【发布时间】：2021-07-31 07:42:29
【问题描述】：

我是新开发人员，这是我的第一个专业项目，也是 Django 中的第一个项目。我正在尝试将从 view.py 中的 models.py 获取的数据加载到 DataTable 中。这是我的代码。
这是我的观点。py

def recordingDataTable(request):
    if request.is_ajax and request.method == "GET":
        vicidial_agent_log = VicidialAgentLog.objects.filter(event_time__gte='2021-04-16 16:00:00').values('user', 'server_ip')
        structure = json.dumps(list(vicidial_agent_log), cls=DjangoJSONEncoder)
        
        return JsonResponse(structure, status = 200, safe=False)
    
    return JsonResponse({}, status = 400)

这是返回的 JSON

"[{\"user\": \"8045\", \"server_ip\": \"168.119.48.158\"}, {\"user\": \"8047\", \"server_ip\": \"168.119.48.158\"},]"

这是我的模板

<table id="recording_datatable" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>Username</th>
            <th>Server IP</th>
        </tr>
    </thead>
    <tbody>
    
    </tbody>
    
    <tfoot>
        <tr>
            <th>Username</th>
            <th>Server IP</th>
        </tr>
    </tfoot>

</table>

最后，这是我的脚本

$(document).ready(function() {
    $.ajax({
        'url': "{% url 'recordings:recordingDataTable' %}",
        'method': "GET",
        'dataType': "JSON",
        'contentType': 'application/json',
        
    }).done( function(data) {
        alert(data);
        
        $('#recording_datatable').DataTable({
            data: data,
            dataSrc: "",
            columns: [
                { data: "user" },
                { data: "server_ip" },
            ]
                
        });

    })
});

每当我运行我的代码时，都会收到以下错误：
DataTables 警告：表 id=recording_datatable - 请求第 0 行第 0 列的未知参数“用户”。有关此错误的详细信息。
我之前已经从 PHP 实现了一个 DataTable，并且似乎做的一切都是正确的。我只是不知道为什么它不起作用。我已经访问了这里的几乎所有文档，Stackoverflow 和 Datatables.net，由于某种原因，似乎没有任何实现有效。

我知道这将是一个简单的错误，但这个问题已经花费了我 3 天的大部分时间。任何帮助将不胜感激。谢谢。

【问题讨论】：

您的 JavaScript 代码看起来不错。但是您的 JSON 实际上不是 JSON - 它是 JSON 的字符串表示形式（而且它不完整 - 但也许它只是问题的编辑版本）。你为什么使用json.dumps？您应该将对象数组传递给 JsonResponse，[ {"user": "Joe" }, { "user": "Jane" } ] - 不传递字符串。
天哪！我合法地这样做了，感觉很傻。是的，它不是 JSON。我只是像这样将它转换为 JSON，并且它起作用了。 const parsedData = JSON.parse(data);。我使用 json.dumps() 是因为我在网上找到了一个解决方案。我想我的 Python 或 Web 开发需要提高很多。谢谢你的帮助。最后，您能帮我解释一下为什么我的return JsonResponse(structure, status = 200, safe=False) 没有将 JSON 返回到我的模板吗？

标签： javascript python json ajax datatable

【解决方案1】：

感谢@andrewjames 的帮助，我找到了解决方案。我传递的是字符串而不是 JSON 响应。可能是菜鸟的错误。

我在 views.py 文件中使用了 json.dumps()，因为我想在将对象传递给 jsonResponse() 之前对其进行序列化，但这是错误的实现。首先，我通过const parsedData = JSON.parse(data); 将模板中的字符串更改为 JSON，然后我的数据填充了数据表。一旦我意识到自己的错误，我最终编辑了我的 views.py 文件以发送 jsonResponse() 并按以下方式进行。

def recordingDataTable(request):

    if request.is_ajax and request.method == "GET":
        vicidial_agent_log = VicidialAgentLog.objects.filter(event_time__gte='2021-04-16 16:00:00').values('user', 'server_ip')
        return JsonResponse(list(vicidial_agent_log), status = 200, safe=False)
    return JsonResponse({}, status = 400)

【讨论】：