使用 Ajax 将模型的查询集从 Django 发送到 React

Question

我一直在寻找这方面的信息几个小时没有任何结果。我正在使用 React 渲染一个页面，我希望它显示一个 Django 模型列表。我正在尝试使用 ajax 来获取模型列表，但没有任何成功。

我不确定我是否理解 JSon 背后的概念，因为当我在我的视图中使用以下代码时：

data = list(my_query_set.values_list('categories', 'content'))
return JsonResponse(json.dumps(data, cls=DjangoJSONEncoder), safe=False)

它似乎只返回一个我无法映射的字符串（当我在返回的对象上调用它时，React 说 map 不是一个函数）。我认为 map 意味着要通过一个 JSON 对象，而 json.dumps 应该创建一个......

返回的 JSon“对象”（我相信它只是一个字符串）： 目前我只有一个没有分类的测试模型，内容是“至少一个笔记”

[[null, "At least one note "]]

反应代码：

$.ajax({
        type:"POST",
        url: "",
        data: data,
        success: function (xhr, ajaxOptions, thrownError) {

            var mapped = xhr.map(function(note){
                return(
                    <p>
                        {note.categories}
                        {note.content}
                    </p>
                )
            })

            _this.setState({notes: mapped})
        },
        error: function (xhr, ajaxOptions, thrownError) {
            alert("failed");
        }
    });

谁能指出将模型从 Django 发送到 React 的最佳方式，以便我可以在前端使用来自该模型的数据？

Answer 1

我建议使用Django REST Framework 将 Django 连接到您的 React 前端。 DRF 的使用模式是：

1. 为您的模型定义序列化程序。这些定义了您将发送到前端的 JSON 化对象中包含哪些字段。在您的情况下，您可以指定“类别”和“内容”字段。
2. 创建一个 API 端点。这是您将从 React 发出请求以访问对象/模型的 URL。
3. 从 React 发出 GET 请求以检索（可能已过滤的）对象集。当接收到来自 React 前端的 POST 请求时，您还可以设置其他端点来修改或创建对象。

在您的 GET 请求的成功函数中，您将收到一个对象数组，其中包含您在序列化程序中设置的字段。在您的示例中，您将收到一个长度为 1 的数组，其中包含一个具有“类别”和“内容”字段的对象。所以xhr[0].content 的值为"At least one note "。

在您的代码中，在 JsonResponse 函数中对 json.dumps 的调用是多余的。查看 the docs 以获取使用 JsonResponse 序列化列表的示例。如果您手动序列化对象（我不建议这样做），我会使用字典而不是列表——类似于{'categories': <value>, 'content' : <value>}。 DRF 会像这样为您序列化对象，因此这些字段更容易在前端访问和解释。