记录一个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对象的区别?

bash 复制代码
{"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是不加双引号的。

相关推荐
IT_陈寒16 分钟前
Vite的热更新突然不香了,排查三小时差点砸键盘
前端·人工智能·后端
子兮曰42 分钟前
Agency-Agents 深度解析:400+ AI 专家的"梦之队"如何重塑开发工作流
前端·后端·vibecoding
山河木马1 小时前
渲染管线-计算得到gl_Position(顶点着色器)之后续GPU流程
javascript·webgl·图形学
竹林8181 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
妙码生花2 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十九):点选验证码代码逐行目检
前端·后端·go
Awu12272 小时前
⚡从零开发 Agent CLI(五)实现一个可治理、可扩展的工具系统
前端·人工智能·claude
咪库咪库咪3 小时前
Vue3-生命周期
前端
莪_幻尘3 小时前
你的 AI Skill 越多越蠢?Token 上下文爆炸的求生指南
前端·ai编程
lichenyang4534 小时前
从 has.echo 到异步 API 注册表:一次 ASCF API 回调不触发的排查复盘
前端
林瞅瞅4 小时前
Nuxt3 项目部署 Nginx 防盗链后特定 JS 文件 403 问题修复方案
前端