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);
});

@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()

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

在Django，我的观点如下：

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);
});

@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()

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

在

request.POST

中，我得到了我想要发送的数据，如下所示：

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);
});

@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()

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

但我希望它在

request.POST.get（'body'）

中，但在那里我什么也得不到

---

有什么想法吗？

request.POST

包含解析

request.body的结果，作为表单编码的内容。请注意，真正的请求内容实际上位于
request.body
（从视图中打印出来以了解其外观）

现在，您的react front正在发布json内容，而不是表单编码的内容，因此您无法从
请求中获取这些数据。POST
-从querydict的外观可以明显看出：

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



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

照此看来，Lincontroll的建议实际上是正确的解决方案——任何REST框架（DRF、Untivent等）FWIW都使用的解决方案：只需使用
request.body
，句号

但是我需要request.POST.get（'body'）中的数据

你不能，因为在
请求中没有“body”键。POST
。句号
 您是否检查了网络选项卡请求？这是服务器端错误吗？或者客户端？尝试使用
request.body
而不是
request.POST.get（'body'）
@lincontroll。但是我想要
request.POST.get（'body'）
中的数据。知道怎么做吗？@Boky在这种情况下，你需要在JS方面进行更改。将内容类型更改为
x-www-form-urlencoded
，并将正文更改为qs格式。“但我需要request.POST.get（'body'）”中的数据=>为什么？？？Lincontroll为您提供了解析json帖子内容的正确技术方法。你已经测试过了，它是有效的。你怎么回事啊？？？