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

news2024/11/27 7:38:14

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

起因:我想发送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.coloradmin.cn/o/2201641.html

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

相关文章

浏览器动态移动的小球源码分享

浏览器动态移动的小球源码分享 <script>(function(a){var width100,height100,borderRadius100,circlefunction(){};circle.prototype{color:function(){let colour "#"Math.floor(Math.random()*255).toString(16)Math.floor(Math.random()*255).toString…

基于SpringBoot剧本杀管理系统 【附源码】

基于SpringBoot剧本杀管理系统 效果如下&#xff1a; 系统首页界面 系统注册页面 剧本信息详细页面 后台登录界面 管理员主界面 剧本信息界面 剧本预约界面 作者主界面 研究背景 随着现代社会生活节奏的加快&#xff0c;人们越来越渴望通过各种娱乐活动来释放压力和增进社交…

开源 Three.js 案例及入门教程

Three.js入门教程目录 章节1认识three.js与开发环境搭建,rar 章节2 Three.js开发入门与调试设置,rar 章节3 Geometry进阶详解.rar 章节4 详解材质与纹理.rar 章节5 纹理材质高级操作,rar 章节6 详解灯光与阴影.rar 章节7 精通粒子特效.rar 章节8 详解光线投射与物体交互…

内容营销:基于大模型的内容再利用

在这篇文章中&#xff0c;我将带你了解一个完整的自动化系统&#xff0c;该系统可帮助你将任何内容重新用于你想要的其他帖子。 输入的内容可以是任何东西&#xff1a;YouTube 视频链接、博客文章链接、大纲、推文、pdf 等…… 我将在本文末尾为你提供所有代码。 一步一步地…

基于SpringBoot+Vue+Uniapp的仓库点单小程序的详细设计和实现

2. 详细视频演示 文章底部名片&#xff0c;联系我获取更详细的演示视频 3. 论文参考 4. 项目运行截图 代码运行效果图 代码运行效果图 代码运行效果图 代码运行效果图代码运行效果图 代码运行效果图 5. 技术框架 5.1 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发…

毕业设计 | Ruff开发板 + 华为云IoT物联网平台,实现家中温度、湿度、二氧化碳、PM2.5、甲醛监控分析...

基于温湿度、空气质量传感器实现温度、湿度、二氧化碳、PM2.5、甲醛环境数据实时监测。 硬件清单 我们采用 Ruff 开发板&#xff0c;串口连接温湿度传感器 DHT11 和空气质量传感器 SDS011&#xff0c;每5分钟采集一次数据&#xff0c;通过MQTT协议发送到华为云 IoT 物联网平台&…

QRTCN区间预测 | Matlab实现QRTCN时间卷积神经网络分位数回归区间预测

区间预测 | Matlab实现QRTCN时间卷积神经网络分位数回归区间预测 目录 区间预测 | Matlab实现QRTCN时间卷积神经网络分位数回归区间预测预测效果基本介绍模型特性程序设计参考资料预测效果 基本介绍 Matlab实现QRTCN时间卷积神经网络分位数回归区间预测 QRTCN(Quantile Regres…

Java数据类型常量

目录 一、数据类型 1.1分类 1.2关键字&内存占用&范围 1.3包装类 1.4说明 1.5类型转换 1.6类型提升 二、常量 2.1java中的常量 2.2定义常量 2.3分类 一、数据类型 1.1分类 1.2关键字&内存占用&范围 数据类型关键字内存占用范围字节型byte1字节-128…

【学术会议征稿】2024年信号处理与神经网络应用国际学术会议(SPNNA 2024)

2024年信号处理与神经网络应用国际学术会议&#xff08;SPNNA 2024&#xff09; 2024 International Conference on Signal Processing and Neural Network Applications 2024年信号处理与神经网络应用国际学术会议&#xff08;SPNNA 2024&#xff09;将于2024年12月13日至15…

scratch星际穿越 2024年9月中国电子学会图形化编程 少儿编程 scratch编程等级考试一级真题和答案解析

目录 scratch星际穿越 一、题目要求 1、准备工作 2、功能实现 二、案例分析 1、角色分析 2、背景分析 3、前期准备 三、解题思路 1、思路分析 2、详细过程 四、程序编写 五、考点分析 六、 推荐资料 1、入门基础 2、蓝桥杯比赛 3、考级资料 4、视频课程 5、…

DevExpress WinForms中文教程:Data Grid - 如何完成数据输入验证?

本教程介绍DevExpress WinForm的Data Grid控件是如何利用网格组件完成数据输入验证的。 P.S&#xff1a;DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序…

Python酷库之旅-第三方库Pandas(140)

目录 一、用法精讲 631、pandas.Timestamp类 631-1、语法 631-2、参数 631-3、功能 631-4、返回值 631-5、说明 631-6、用法 631-6-1、数据准备 631-6-2、代码示例 631-6-3、结果输出 632、pandas.Timestamp.asm8属性 632-1、语法 632-2、参数 632-3、功能 632…

java类和对象_成员变量方法修饰符局部变量this关键字-cnblog

java类和对象 成员变量 权限修饰符 变量类型 变量名; 成员变量可以是任意类型,整个类是成员变量的作用范围 成员变量 成员方法 权限修饰符 返回值类型 方法名() 成员方法可以有参数&#xff0c;也可以有返回值&#xff0c;用return声明 权限修饰符 private 只能在本类…

IDEA必装的插件:Spring Boot Helper的使用与功能特点

在IntelliJ IDEA中&#xff0c;Spring Boot Helper插件是一个非常实用的工具&#xff0c;可以帮助我们更快速地创建和管理Spring Boot项目。以下是Spring Boot Helper插件的详细介绍和使用方法&#xff1a; 激活码地址: 点击获取 一、安装Spring Boot Helper插件 1 打开Intell…

如何设计三极管放大电路?

设计放大电路 分压式串联负反馈放大电路 可以看下面这个视频 , 讲得更加详细 366-单管放大电路偏置电阻的计算&#xff0c;看完自己也会设计一个_哔哩哔哩_bilibili 计算流过电阻Rb2的电流过程中,工程当中常发现Rb2上的电流是Ib的5倍 , 因此由基尔霍夫电流定律也能知道流过R…

Java的基础概念和常识(二)

什么是字节码&#xff1f;采用字节码的好处是什么&#xff1f; 字节码&#xff08;Byte-code&#xff09;是一种中间形式的代码&#xff0c;是源代码编译后生成的一种低级表示&#xff0c;通常是在编译阶段生成的。在 Java 中&#xff0c;JVM 可以理解的代码就叫做字节码&…

K8s(学习笔记)

swap分区是什么呀&#xff1f; 什么是ipvs呀&#xff1f; yaml是什么呀&#xff1f;&#xff1f;&#xff1f; p20看不下去了&#xff01;&#xff01;&#xff01;

ansible 流程控制

目录 1.流程控制 2.handlers触发器 2.1使用handlers案例 3.when 判断 3.1 案例1 用于给task设置条件 满足或者不满足运行对应模块 3.2 案例2 如果系统是centos则安装sl&#xff0c;cowsay 如果是unbantu则安装cmatrix 4.循环 4.1案例 1.流程控制 hand…

飞腾CPU技术发展分析

飞腾CPU剖析 CPU&#xff1a;信创根基&#xff0c;国之重器 国产CPU市场呈现三大领军阵营&#xff1a;x86、ARM以及其他创新架构。鲲鹏与飞腾在ARM阵营中引领风潮&#xff0c;依托ARM技术授权研发高性能处理器&#xff1b;海光与兆芯则以x86架构为基石&#xff0c;深入挖掘其潜…