react fetch 往后台传数组、list列表

首先, 数据要在网络上传输, 就会涉及到数据序列化的问题, 因为双边数据在内存中的形式极有可能不一样, 这个时候需要约定一种双边都认可并且能实现的序列化方式, 使得数据能够被发送方序列化, 并且在网络中传输, 最终被接收方正确的反序列化.

为了适应不同的数据以及客户端环境, HTTP协议约定通过请求头中的Content-Type字段来确定数据序列化协议, 常用的有:

application/x-www-form-urlencoded

multipart/formdata

application/json

其中第一个和第二个是几乎所有浏览器和服务器都支持的协议, 第一个用来传输文本信息, 而二个用来传输文本信息或者二进制数据, 比如文件上传等. 在没有二进制数据时, 通常使用第一种方式, 因为其压缩比例相对较高. 而第三个就是我们熟悉的JSON序列化.

无论是第一种还是第二种协议, 其所能处理的数据都是只有一层的简单key-value形式.
并且第一种的值只能是字符串, 第二种除了是字符串之外还可以是二进制数据.

所以为了后台接收到数组、列表、布尔类型的值,必须用第三种方式

首先 index.js

const data = {'name':'张三','age':66,'isMan':true,'list':[22,33],}
fetch(url, {
    body: JSON.stringify(data), // must match 'Content-Type' header
    cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', // include, same-origin, *omit
    headers: {
      'user-agent': 'Mozilla/4.0 MDN Example',
      'content-type': 'application/json'
    },
    method: 'POST', // *GET, POST, PUT, DELETE, etc.

这样在后台接受时,flask_run.py

jsondata = request.json
name = jsondata['name '] # str, '张三'
age = jsondata['age']  # int, 66岁
isMan = jsondata['isMan']  # boolean, True
list= jsondata['list']  # ['33', '22'], list

发表评论

邮箱地址不会被公开。 必填项已用*标注