记录一个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.xdnf.cn/news/1559400.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

开源的键鼠共享工具「GitHub 热点速览」

十一长假回来,我的手放在落灰的键盘上都有些陌生了,红轴竟敲出了青轴般的响声,仿佛在诉说对假期结束的不甘。 假期回归的首更,让我们看看又有什么好玩的开源项目冲上了开源热榜。一套键盘和鼠标控制多台电脑的工具 deskflow&#…

supOS加速数实融合发展

作为工业操作系统领军企业,蓝卓受邀参加2024金砖国家新工业革命伙伴关系论坛,深度参与多个环节。在9月11日召开的金砖国家新工业革命伙伴关系论坛产融合作专题研讨上,蓝卓总经理谭彰分享了supOS在产融协同的最新实践,以及supOS进入…

云上考场小程序+ssm论文源码调试讲解

2 关键技术简介 2.1 微信小程序 微信小程序,简称小程序,英文名Mini Program,是一种全新的连接用户与服务的方式,可以快速访问、快速传播,并具有良好的使用体验。 小程序的主要开发语言是JavaScript,它与…

集师知识付费小程序:打造培训机构在线教育的金字招牌 集师知识付费系统 集师知识付费小程序 集师知识服务系统 集师线上培训系统 集师线上卖课小程序

在数字化浪潮的推动下,在线教育已成为教育领域的热门话题。而在众多在线教育平台中,集师知识付费小程序凭借其独特的定位和创新的模式,成功为培训机构打造了一张闪亮的在线教育金字招牌。 集师知识付费小程序,是一个集课程展示、…

数据分析Power BI设置万为单位的数据

玩过Power BI的同学都知道,power BI在度量值设置单位里,唯独没有万这个单位,但是我们可以自定义,操作过程如下: 1.用DAX新建单位表 单位 SELECTCOLUMNS( { ( "元", 1), ("万",10000), ("千…

面试题:Redis(三)

1. 面试题 背景 问题,上面业务逻辑你用java代码如何写? 2. 缓存双写一致性谈谈你的理解? 3. 双检加锁策略 多个线程同时去查询数据库的这条数据,那么我们可以在第一个查询数据的请求上使用一个 互斥锁来锁住它。 其他的线程走到这…

进程守护化

文章目录 概念引入ps细节展示什么是进程组什么是会话细节演示有关指令的处理 用户级任务和进程组的关系关系不同 什么是守护进程如何创建守护进程 代码说明如何关闭守护进程 问题 概念引入 我们在之前的章节中已将看过进程相关的概念, 本篇介绍守护进程 进程还有进程组, 作业,…

锐龙7 7800X3D与i7-14700K到底怎么选!其实很简单

从2022年的锐龙7 5800X3D到后来的锐龙7 7800X3D,笔者使用X3D处理器已有2年多的时间。站在自己的立场,我是非常希望游戏老鸟购买这类处理器的,并且也推荐了不少。 这里说的是老鸟,也就是比较懂电脑的玩家。 但是对于新手玩家而言&a…

Kali Linux 下载与安装手册

目录 Kali 是什么? 通过Kali官方网站下载 Kali 是什么? Kali Linux,前称BackTrack,是一个基于Debian的Linux发行版,专为数字取证和渗透测试而设计。它由Offensive Security Ltd.开发和维护,旨在为安全专…

HarmonyOS NEXT应用开发实战(二、封装比UniApp和小程序更简单好用的网络库)

网络访问接口,使用频次最高。之前习惯了uniapp下的网络接口风格,使用起来贼简单方便。转战到鸿蒙上后,原始网络接口写着真累啊!目标让鸿蒙上网络接口使用,简单程度比肩uniapp,比Axios更轻量级。源码量也不多…

【Parsec】一款安全高效的远程桌面软件

Parsec 是一款远程桌面软件,它允许用户通过P2P(点对点)技术远程访问和控制另一台计算机。以下是Parsec的一些主要作用、安全私密性特点以及优缺点: 作用: 远程游戏:用户可以远程访问高性能PC进行游戏&am…

记一次pyc逆向

.py文件   源代码文件。   这是开发者编写的 Python 源代码文件,包含了可执行的 Python 代码。 .pyc文件   字节码文件。   Python 源文件(.py)在执行时会被编译为字节码,并存储在 __pycache__ 目录下,文件名通…

Halcon形态学

形态学图像处理(简称形态学)是指一系列处理图像形状特征的图像处理技术。 形态学的基本思想是利用一种特殊的结构元来测量或提取输入图像中相应的形状或特征,以便进一步进行图像分析和目标识别。本章节依次对腐蚀,膨胀&#xff0…

Nacos作为注册中心和配置中心

下载安装Nacos 下载地址&#xff1a;Nacos 下载后将这个.zip文件解压 windows系统双击运行startup.cmd 注意事项 一些较新的版本可能会启动时闪退&#xff0c;解决方法为记事本编辑startuo.cmd文件 修改set MODE "standalone" Nacos注册中心 引入依赖 <dep…

动态规划算法专题(六):回文串问题

目录 1、回文子串&#xff08;"引子题"&#xff09; 1.1 算法原理 1.2 算法代码 2、最长回文子串 2.1 算法原理 2.2 算法代码 3、分割回文串 IV&#xff08;hard&#xff09; 3.1 算法原理 3.2 算法代码 4、分割字符串 II&#xff08;hard&#xff09; 4…

Spring Boot教学资源库:开发者的成长之路

2 相关技术简介 2.1Java技术 Java是一种非常常用的编程语言&#xff0c;在全球编程语言排行版上总是前三。在方兴未艾的计算机技术发展历程中&#xff0c;Java的身影无处不在&#xff0c;并且拥有旺盛的生命力。Java的跨平台能力十分强大&#xff0c;只需一次编译&#xff0c;任…

AI视频技术复活老照片-简单快捷

准备老照片 可在网上搜索“老照片”图片&#xff0c;选择人物背景全的图片 照片修复 腾讯的ARC Lab网站 https://arc.tencent.com/zh/ai-demos/faceRestoration 上传照片&#xff0c;修复后下载&#xff0c;会直接在浏览器中下载 AI视频生成 采用可灵网&#xff1a; http…

PGMP-05相关方

目录 1.主要内容 2.概括 3.相关方人员 1.主要内容 Stakeholders IdentificationStakeholders AnalysisStakeholders Engagement PlanningStakeholders EngagementStakeholder communications 2.概括 识别&#xff1a;产生相关方登记册&#xff0c;使用头脑风暴分析&#x…

深入理解Transformer的笔记记录(精简版本)----Seq2Seq → Seq2Seq with Attention

只要是符合类似的框架,都可以统称为 Encoder-Decoder 模型。 1、RNN RNN引入了隐状态h(hidden state)的概念,隐状态h可以对序列形的数据提取特征,接着再转换为输出。 x1,x2,x3,x4如: 自然语言处理问题。x1可以看做是第一个单词,x2可以看做是第二个单词,依次类推语音处…

2024 闽盾杯-黑盾赛道WP

CRYPTO 签到题-学会SM https://www.json.cn/encrypt/sm3 题目要求小写所以需要转换一下 或者脚本&#xff1a; import hashlib message "heidun2024" hash_object hashlib.new(sm3) hash_object.update(message.encode(utf-8)) hash_value hash_object.hexdigest(…