时间戳

首页 > 解决方案 > 如何将数据从 React 发送到 Django API

javascript - 如何将数据从 React 发送到 Django API

问题描述

我正在尝试使用 django 将一些数据添加到数据库中。作为前端，我使用 React。

因此，fetch请求如下：

const data = {
  name: formData.name,
  email: formData.email,
  title: formData.title,
  message: formData.message
};

fetch("/some/some_view/", {
  method: 'POST',
  headers: {
    'Accept': 'application/json, text/plain, */*',
    "Content-Type": "application/json"
  },
  body: JSON.stringify(data),
})
  .then((response) => response.json())
  .then((data) => {
  debugger;
  console.log('Success:', data);
})
  .catch((error) => {
  debugger;
  console.error('Error:', error);
});

在 Django 中，我的观点如下：

@csrf_exempt
def some_view(request):
    if request.method == 'GET':
        return HttpResponse('Unauthorized', status=400)
    if request.method == 'POST':
        #TODO: Add security
        item = json.loads(request.POST.get('body'), object_hook=json_util.object_hook)
        pdb.set_trace()
        return HttpJsonOk()

在request.POST我得到我想要发送的数据如下：

<QueryDict: {u'{"name":"dsdsd","email":"dsdsd@dsds.com","title":"dsds jflj ","message":"dlkj lksj kmsdkk fljs m"}': [u'']}>

但我希望它在request.POST.get('body')，但在那里我什么也得不到。

任何想法？

标签： javascriptdjangoreactjsfetch

解决方案

request.POST包含解析request.body为表单编码内容的结果。请注意，真正的请求内容实际上是在request.body（从您的视图中打印出来以了解它的样子）。

现在您的反应前端正在发布 json 内容，而不是表单编码的内容，因此您无法从中获取这些数据request.POST- 正如您显然可以从 querydict 的样子中看出：

 <QueryDict: {u'{"name":"dsdsd","email":"dsdsd@dsds.com","title":"dsds jflj ","message":"dlkj lksj kmsdkk fljs m"}': [u'']}>

如您所见，解析失败（因为它不是表单编码的），导致整个提交的 json 被用作键，没有关联的值。

IOW，LinnTroll 的建议实际上是正确的解决方案 - 任何 REST 框架（DRF、restless 等）FWIW 使用的解决方案 - ：只需使用request.body, 句号。

但我想要 request.POST.get('body') 中的数据

你不能，因为没有'body'键request.POST。时期。

推荐阅读