记录一个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解题思路编写代码 总结 什么是二分? 二分是一种思想,用于有序数组中快速查找目标元素。 用动图展示一下…

Java设计模式10 - 观察者模式

观察者模式 观察者模式也叫作发布-订阅模式,也就是事件监听机制。观察者模式定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象,这个主题对象在状态上发生变化时,会通知所有观察者对象,使他们能够自…

信息系统的生命周期

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

【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生命周期对比冷启动保留当前页面和关闭当…

【玩转 JS 函数式编程_015】4.2 JavaScript 函数式编程核心基础强化之:玩转非纯函数(Impure functions)

文章目录 4.1 纯函数4.1.1. 引用透明 Referential transparency4.1.2. JS 函数中的副作用 Side effects4.1.3. 纯函数的优势 Advantages of pure functions 4.2. 非纯函数 Impure functions ✔️4.2.1. 避开非纯函数 Avoiding impure functions1 避免使用状态 Avoiding the usa…

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…

vue3日历组件库Vue-Cel使用

官网地址 安装 npm i vue-cal<template><div class"calendar-container"><!-- 这个日历双击可以跳转到下一个周期,但是我项目不允许点击,没找到相关的禁用事件,这里写个蒙层阻止点击 --><div class"mask"></div><!-- 日…

STM32单片机(F03C8T6)-点灯(寄存器点灯和库函数点灯)

作者&#xff1a;Whappy 时间&#xff1a;2024.10.9 日志&#xff1a;本实验是我第一个32位单片机实验程序&#xff0c;如有不足请指点&#xff01; #include "stm32f10x.h" // Device headerint main(void) {//寄存器点灯RCC->APB2ENR 0x000…

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

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

Monorepo pnpm 模式管理多个 web 项目

Monorepo pnpm 模式管理多个 web 项目 Monorepo pnpm 模式管理多个 web 项目项目地址git flow 工作流程pnpm workspace.npmrc初始化项目架构引入Husky规范git提交配置eslint和prettiereslint 配置prettier 配置 配置lint-staged创建项目创建shared项目全局安装 vue在 packages …

新兴的安全职业挑战

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

025 elasticsearch索引管理-Java原生客户端

文章目录 pom.xml1创建索引2.创建索引并设置settings信息3.创建索引并设置mapping信息4.删除索引库5.给未设置mapping的索引设置mapping elasticsearch版本7.10.2&#xff0c;要求java客户端与之相匹配&#xff0c;推荐Springboot版本是2.3以上版本 依赖配置使用的是JUnit 5&am…

oracle操作回退SQL

对表数据进行操作后&#xff0c;提交了事务&#xff0c;发现数据更新或者删除错了&#xff0c;这时候还是有方法可以数据回退的 进行数据回退操作&#xff0c;将数据回退到xxxx分钟&#xff0c;也就是update操作之前&#xff1a; 在回退之前&#xff0c;先查询xx分钟的数据&…

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

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