当前位置: 首页 > news >正文

记录一个Ajax发送JSON数据的坑,后端RequestBody接收参数小细节?JSON对象和JSON字符串的区别?

上半部分主要介绍我实际出现的问题,最终下面会有总结。

起因:我想发送post请求的data,但是在浏览器中竟然被搞成了地址栏编码

如图前端发送的ajax请求数据


如图发送的请求体:

很明显是key=value这种形式,根本就不是我们想要的{key:value}这种JSON形式。并且我们明明指定发送数据类型dataType和文本类型contentType都是json格式,为什么还是不行呢?
 

原因:浏览器会检测你的data和contentType,虽然contentType满足,但是你的实际的data类型不满足,因为如果发送的是JSON对象,浏览器默认会进行地址栏编码urlEncode,只有你发送的是JSON对象才会真正发送出JSON数据。
 

这里解释一下JSON对象和JSON字符串的区别,我看到很多人说什么key带不带引号的区别?

我觉得纯纯扯淡,他俩的区别也就是字面意思的区别,就很简单一个是对象,一个是字符串,数据类型不同。至于key加不加引号,JSON对象的key加不加引号都可以,而JSON字符串必须加引号,所以为了统一,也为了我们后续出现混淆,key一律加引号!!!!

所以最终的JSON对象格式:{"name":"zhangsan"}
而JSON字符串格式:'{"name":"zhangsan"}'

JSON字符串除了外面多的那个'',其他别无区别,那怎么将JSON对象转换为JSON数据进行发送呢?使用JS内置的JSON.stringify(data)这个函数,其实你比较'{"name":"zhangsan"}'和使用
JSON.stringify({"name":"zhangsan"})结果比较是完全相同的。

那可能有人问了,就这么简单,就是这么简单,也就是这么不简单,别看这一个''小小的引号,你如果不用这个函数,能给你玩死,例如,我们不用函数,怎么把他变为JSON字符串的

看到没就是各种引号去拼接,我这里才只是一个变量,如果你有多个呢?你能看的清吗?而且根本就是屎山没办法看,少一个引号都得报错,所以直接调用内置的函数JSON.stringify就好。
 

总结:上述可能有些乱,我总结上述说的几个重要点?

一、JSON字符串和JSON对象的区别?

{"name":"zhangsan"}   //数据类型object
'{"name":"zhangsan"}' //数据类型string 

二、JSON字符串和JSON对象的区别,关于网上说的是key加不加引号的问题的区别?

纯纯误导人,并且没有做测试,key值为了统一,一律加双引号。因为JSON字符串key值不加上瘾好,解析会报错,而JSON对象key加不加双引号,结果都是一样的,所以为了我们减少混淆和误导,更易于我们后续区分JSON对象和JSON字符串,key一律加双引号。这样他们本质的区别就是数据类型的不同,一个是对象,一个是字符串。

三、为什么要转换成JSON字符串进行数据传输?

因为浏览器默认会将JSON对象进行地址栏编码,即URL编码,就是变成key=value的数据形式,后端@RequestBody解析不了,因为不是标准的JSON格式数据。
只有发送JSON字符串,才会进行JSON编码,从而发送JSON数据
 

四、为什么使用JSON.stringify()将JSON对象转换成JSON字符串?

如果不使用,使用传统的引号拼接方法,也能实现,比较麻烦,而且容易因为哪个引号的少拼接导致数据错误,不易发现,而且代码丑陋。

五、同事间说的JSON数据就是什么?

同事说给我穿个JSON数据,其实说的就是我们前端发送的JSON字符串,最终被浏览器通过JSON编码解析出来的样子,结果实际上就是一个{key:value},其中key是不加双引号的。

http://www.lryc.cn/news/459385.html

相关文章:

  • 【智能算法应用】长鼻浣熊优化算法求解二维路径规划问题
  • 微服务中的负载均衡算法与策略深度解析
  • 初知C++:AVL树
  • [LeetCode] 67. 二进制求和
  • 工业物联网关-ModbusTCP
  • 子组件向父组件传值$emit
  • 校车购票微信小程序的设计与实现(lw+演示+源码+运行)
  • 【Golang】关于Go语言中的定时器原理与实战应用
  • matlab不小心删除怎么撤回
  • 云原生、云计算、虚拟化概念概述
  • 【Trulens框架】用TruLens 自动化 RAG 应用项目评估测试
  • 互联网线上融合上门洗衣洗鞋小程序,让洗衣洗鞋像点外卖一样简单
  • R语言绘制三维散点图
  • 2014年国赛高教杯数学建模A题嫦娥三号软着陆轨道设计与控制策略解题全过程文档及程序
  • QD1-P25 CSS 背景
  • 《Linux运维总结:基于ARM64+X86_64架构CPU使用docker-compose一键离线部署mongodb 7.0.14容器版分片集群》
  • Java利用ChromeDriver插件网页截图(Wondows版+Linux版)
  • 无人机之交互系统篇
  • MarsCode--找出数字比例超过n/2的【简单】
  • Python网络爬虫快速入门指南
  • C86 架构一键离线安装 docker 和 docker-compose 实战指南
  • 【LwIP源码学习2】调试输出相关宏
  • Python 列表专题:删除元素
  • Spring Boot 快速入门与核心原理详解
  • UniApp 与微信小程序详细对比
  • 【用大模型提示工程处理NLP任务】
  • 适配器模式、代理模式(C++)
  • unity 2d 近战攻击判定的三种方式以及精确获取碰撞点
  • 矩形函数的傅里叶变换——从一维到二维,从连续到离散
  • 潜水打捞系统助力,破解汽车打捞难题