记录一个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.mzph.cn/pingmian/56274.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于Java+SpringBoot+Vue的在线文档管理系统的设计与实现

基于JavaSpringBootVue的在线文档管理系统的设计与实现 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 🍅文末附源码下载链接&…

【算法题解】二分查找的经典问题解析

文章目录 什么是二分?关于二分的一些题目1.分巧克力解题思路编写代码 2.数组中数值和下标相等的元素3.0到n-1中缺失的数字4.数列分段 II解题思路编写代码 总结 什么是二分? 二分是一种思想,用于有序数组中快速查找目标元素。 用动图展示一下…

信息系统的生命周期

信息系统是面向现实世界人类生产、生活中的具体应用,是为了提高人类活动的质量、效率而存在的。信息系统的目的、性能、内部结构和秩序、外部接口、部件组成等由人来规划,它的产生、建设、运行和完善构成一个循环的过程,这个过程遵循一定的规…

【vue】指令补充+样式绑定+计算属性+侦听器

代码获取 知识总结 ⼀、指令补充 1.指令修饰符 1.1 什么是指令修饰符? 所谓指令修饰符就是让指令的 功能更强⼤,书写更便捷 1.2 分类 1.2.1 按键修饰符 keydown.enter:当enter键按下时触发 keyup.enter:当enter键抬起时触…

Jmeter脚本录制:抓取IOS手机请求包

现在移动端的项目越来越多,今天给大家介绍一下,在IOS下Jmeter如何抓包。 1、电脑连上wifi 2、Jmeter中配置“HTTP代理服务器” 1)启动Jmeter; 2)“测试计划”中添加“线程组”; 3)“测试计划”中添加“HTTP代理服务器”&…

强化学习和QLearning及GAN到底是什么关系啊

强化学习(Reinforcement Learning)、Q-Learning 和生成对抗网络(GANs)是机器学习中的三个不同概念,它们虽然有一些交叉,但本质上是针对不同问题的技术方法。下面我来详细解释它们之间的关系和区别&#xff…

Springboot 整合 Java DL4J 实现农产品质量检测系统

🧑 博主简介:历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,精通Java编程,…

图片美化SDK解决方案,赋能H5与小程序极致体验

无论是社交媒体分享、电商产品展示,还是个人日常生活的记录,一张经过精心美化的图片总能瞬间吸引眼球,传递出更加丰富和动人的信息。如何在不增加应用体积、不牺牲用户体验的前提下,为H5页面和小程序提供媲美原生APP的图片美化功能…

微信小程序-自定义组件

文章目录 微信小程序-自定义组件概述创建和使用数据、方法和属性slot 插槽默认插槽具名插槽 组件样式注意项样式隔离 数据监听组件间通信父传子子传父获取子组件实例 生命周期组件的生命周期组件所在页面的生命周期App、Page与Component生命周期对比冷启动保留当前页面和关闭当…

linux源码安装slurm以及mung和openssl

一、源码安装munge 1、编译安装munge (1)下载munge地址:https://github.com/dun/munge/releases (2)解压编译安装: 1 2 3 4 5 6 7 8 创建/data目录 复制文件munge-0.5.15.tar.xz 到/data目录下 tar -Jx…

界面耻辱纪念堂--可视元素03

更多的迹象表明,关于在程序里使用新的动态界面元素,微软的态度是不确定的,其中一个是仅仅需要对比一下Office97 里的“Coolbars”和“标准工具条”。Coolbar 按钮直到用户指针通过的时候才成为按钮(否则是平的)。 工具…

新兴的安全职业挑战

我们经常与安全专业人士交谈,他们希望在努力提升职业发展的同时提高自己的价值并克服组织内部的挑战。在这些谈话中,花费大量时间讨论公司未来将面临的安全问题并不罕见。 安全领导者希望为问题制定计划并获得领导层对其计划的支持。这通常意味着实施修…

MYSQL-windows安装配置两个或多个版本MYSQL

安装第一个mysql很简单,这里不再赘述。主要说说第二个怎么安装,服务怎么配置。 1. 从官网下载第二个MySQL并安装 一般都是免安装版了,下载解压到某个文件目录下(路径中尽量不要带空格或中文),再新建一个my.ini文件(或…

Reality Capture 软件安装 附下载链接

Reality Capture 软件安装 文章目录 Reality Capture 软件安装一、Reality Capture v1.4汉化版安装包下载并解压二、Epic Games Launcher安装三、设置路径并安装![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/f077210990674d9fa9c10b52338b52fe.png)四、启动Epic Ga…

Chromium 如何查找V8 引擎中JavaScript 标准内置对象

JavaScript 标准内置对象 - JavaScript | MDN (mozilla.org) 一、JavaScript 标准内置对象 本章介绍和说明了 JavaScript 中所有的标准内置对象、以及它们的方法和属性。 这里的术语“全局对象”(或标准内置对象)不应与 global 对象混淆。这里的“全局…

985研一学习日记 - 2024.10.11

偶尔一碗热鸡汤:一个人内耗,说明他活在过去;一个人焦虑,说明他活在未来。只有当一个人平静时,他才活在现在。 日常 1、6:00起床 √ 2、健身1h 今天练了肩部以及背,然后跑步半小时 3、LeetC…

Python环境搭建

Python环境搭建 1 安装Python 双击安装包 2 安装Pycharm 双击安装包,然后下一步 安装完成后重启电脑 3 破解Pycharm 启动Pycharm 破解 4 pycharm的基本配置 1.主题颜色 2. 文件语言编码 滚动鼠标滑轮ctrl,可以快速缩放文本字体大小。 控制台编码的格式&#x…

Qt - QMenu

QMenu 1、menu转string输出 //GlobalEnum.h #include <QObject> #include <QMetaEnum> class GlobalEnum : public QObject {Q_OBJECT public:EnumTest();enum Enum_Test{ZhangSan 0,WangWu,};Q_ENUM(Enum_Test) };#define EnumToString(e) \ QMetaEnum::fromTy…

Qt初识_通过代码创建hello world

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 Qt初识_通过代码创建hello world 收录于专栏【Qt开发】 本专栏旨在分享学习Qt的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1.通过按…

c语言库文件

c语言库文件 动态库动态库制作首先生成动态库文件名使用动态库编译动态库运行删除动态库1.sudo su 静态库静态库制作需要将源文件.c转换成二进制文件.o&#xff08;重定向文件&#xff09;将重定向文件打包成静态库文件使用静态库文件 静态库和动态库的区别 库文件的概念 我们将…