当前位置: 首页 > news >正文

记录一个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是不加双引号的。

相关文章:

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

上半部分主要介绍我实际出现的问题,最终下面会有总结。 起因:我想发送post请求的data,但是在浏览器中竟然被搞成了地址栏编码 如图前端发送的ajax请求数据 如图发送的请求体: 很明显是keyvalue这种形式,根本就不是…...

【智能算法应用】长鼻浣熊优化算法求解二维路径规划问题

摘要 本文采用长鼻浣熊优化算法 (Coati Optimization Algorithm, COA) 求解二维路径规划问题。COA 是一种基于长鼻浣熊的觅食和社群行为的智能优化算法,具有快速收敛性和较强的全局搜索能力。通过仿真实验,本文验证了 COA 在复杂环境下的路径规划性能&a…...

微服务中的负载均衡算法与策略深度解析

在微服务架构中,负载均衡是保证系统高可用性和高性能的关键技术。通过合理地将请求分配给多个服务实例,负载均衡策略可以优化资源利用,实现请求的均衡处理。本文将深入探讨微服务中的负载均衡算法及其配置策略,帮助读者更好地理解…...

初知C++:AVL树

文章目录 初知C:AVL树1.AVL树的概念2.AVL树的是实现2.1.AVL树的结构2.2.AVL树的插入2.3.旋转2.4.AVL树的查找2.5.AVL树平衡检测 初知C:AVL树 1.AVL树的概念 • AVL树是最先发明的自平衡⼆叉查找树,AVL是⼀颗空树,或者具备下列性…...

[LeetCode] 67. 二进制求和

题目描述: 给你两个二进制字符串 a 和 b ,以二进制字符串的形式返回它们的和。 示例 1: 输入:a "11", b "1" 输出:"100" 示例 2: 输入:a "1010", b "…...

工业物联网关-ModbusTCP

Modbus-TCP模式把网关视作Modbus从端设备,主端设备可以通过Modbus-TCP协议访问网关上所有终端设备。用户可以自定义多条通道,每条通道可以配置为TCP Server或者TCP Slave。注意,该模式需要指定采集通道,采集通道可以是串口和网口通…...

子组件向父组件传值$emit

点击子组件的按钮&#xff0c;将子组件的值传递给父组件&#xff0c;并进行提示。 子组件 <template><div><button click"emitIndex">clickme</button></div> </template> <script> export default {methods: {emitInde…...

校车购票微信小程序的设计与实现(lw+演示+源码+运行)

摘 要 由于APP软件在开发以及运营上面所需成本较高&#xff0c;而用户手机需要安装各种APP软件&#xff0c;因此占用用户过多的手机存储空间&#xff0c;导致用户手机运行缓慢&#xff0c;体验度比较差&#xff0c;进而导致用户会卸载非必要的APP&#xff0c;倒逼管理者必须改…...

【Golang】关于Go语言中的定时器原理与实战应用

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…...

matlab不小心删除怎么撤回

预设项——>删除文件——>移动至临时文件夹 tem临时文件夹下...

云原生、云计算、虚拟化概念概述

&#xff08;带着批评阅读&#xff0c;不对的请评论区补充&#xff09; 1、出现年代前后顺序 虚拟化------>云计算------>云原生 2、虚拟化 虚拟化侧重描述实现&#xff0c;最开始的技术是模拟、hook指令执行软件程序&#xff0c;后续出现了半虚拟化、CPU硬件提供虚拟化…...

【Trulens框架】用TruLens 自动化 RAG 应用项目评估测试

前言&#xff1a; 什么是Trulens TruLens是面向神经网络应用的质量评估工具&#xff0c;它可以帮助你使用反馈函数来客观地评估你的基于LLM&#xff08;语言模型&#xff09;的应用的质量和效果。反馈函数可以帮助你以编程的方式评估输入、输出和中间结果的质量&#xff0c;从而…...

互联网线上融合上门洗衣洗鞋小程序,让洗衣洗鞋像点外卖一样简单

随着服务创新的风潮&#xff0c;众多商家已巧妙融入预约上门洗鞋新风尚&#xff0c;并携手洗鞋小程序&#xff0c;开辟线上蓝海。那么&#xff0c;这不仅仅是一个小程序&#xff0c;它究竟蕴含着哪些诱人好处呢&#xff1f; 1. 无缝融合&#xff0c;双线共赢&#xff1a;小程序…...

R语言绘制三维散点图

之前我们绘制的属于二维散点图&#xff0c;具有两个维度通常是 x 轴和 y 轴&#xff09;上展示数据点的分布。只能呈现两个变量之间的关系。而三维散点图则具有三个维度&#xff08;x 轴、y 轴和 z 轴&#xff09;上展示数据点的分布。可以同时呈现三个变量之间的关系&#xff…...

2014年国赛高教杯数学建模A题嫦娥三号软着陆轨道设计与控制策略解题全过程文档及程序

2014年国赛高教杯数学建模 A题 嫦娥三号软着陆轨道设计与控制策略 嫦娥三号于2013年12月2日1时30分成功发射&#xff0c;12月6日抵达月球轨道。嫦娥三号在着陆准备轨道上的运行质量为2.4t&#xff0c;其安装在下部的主减速发动机能够产生1500N到7500N的可调节推力&#xff0c;…...

QD1-P25 CSS 背景

本节学习&#xff1a;CSS 背景属性 本节视频 https://www.bilibili.com/video/BV1n64y1U7oj?p25 背景颜色 ​​ 背景图片 不重复 ​​ 横向重复 ​​ 纵向重复 ​​ 双向重复 ​​ 背景图片大小 400px ​​ 600px ​​ 原图大小 ​​ 显示器宽度不够时&…...

《Linux运维总结:基于ARM64+X86_64架构CPU使用docker-compose一键离线部署mongodb 7.0.14容器版分片集群》

总结&#xff1a;整理不易&#xff0c;如果对你有帮助&#xff0c;可否点赞关注一下&#xff1f; 更多详细内容请参考&#xff1a;《Linux运维篇&#xff1a;Linux系统运维指南》 一、部署背景 由于业务系统的特殊性&#xff0c;我们需要面向不通的客户安装我们的业务系统&…...

Java利用ChromeDriver插件网页截图(Wondows版+Linux版)

chromedriver是谷歌浏览器驱动,用来模拟谷歌运行操作的一个工具&#xff0c;此处主要讲解Java后端利用此插件进行网页截图&#xff0c;并且适配Linux部署。 环境准备 Wondows服务器或电脑 本机需安装Chrome谷歌浏览器&#xff0c;根据本机浏览器版本&#xff0c;下载对应的chr…...

无人机之交互系统篇

一、系统构成 无人机交互系统通常由多个子系统组成&#xff0c;包括但不限于&#xff1a; 多模式人机交互装置&#xff1a;这是人机交互系统的基础层&#xff0c;通常包括计算机、局域网、传感器等设备&#xff0c;用于实现操作员与无人机之间的数据交互和指令传递。例如&…...

MarsCode--找出数字比例超过n/2的【简单】

问题描述 给定一个长度为n的整型数组&#xff0c;已知其中一个数字的出现次数超过数组长度的一半&#xff0c;找出这个元素 输入格式 一个长度为n的数组&#xff0c;其中某个元素的出现次数大于n/2 输出格式 一个整数 输入样例 [1,3,8,2,3,1,3,3,3] 输出样例 3 数据范…...

IntelliJ插件开发实战:5分钟搞定Action类库配置(附完整代码示例)

IntelliJ插件开发实战&#xff1a;5分钟搞定Action类库配置&#xff08;附完整代码示例&#xff09; 如果你刚接触IntelliJ插件开发&#xff0c;可能会被各种概念和配置搞得晕头转向。Action作为插件开发中最基础也最核心的组件之一&#xff0c;掌握它的使用方法是开发交互式功…...

Android SELinux权限调试实战:从avc denied到te文件修复

1. 初识SELinux权限问题&#xff1a;从avc denied开始 第一次看到avc denied日志时&#xff0c;我盯着那行红字足足愣了五分钟。当时正在调试一个需要访问系统目录的App&#xff0c;突然就蹦出来这么一段&#xff1a; avc: denied { write } for comm"com.test" name…...

2步实现格式自由:Save Image as Type让网页图片转换体验升级10倍

2步实现格式自由&#xff1a;Save Image as Type让网页图片转换体验升级10倍 【免费下载链接】Save-Image-as-Type Save Image as Type is an chrome extension which add Save as PNG / JPG / WebP to the context menu of image. 项目地址: https://gitcode.com/gh_mirrors…...

RK806与RK3588的电源设计最佳实践:如何优化BUCK和LDO布局布线

RK806与RK3588电源设计实战指南&#xff1a;从BUCK到LDO的全面优化策略 在嵌入式系统设计中&#xff0c;电源管理往往是最容易被忽视却又至关重要的环节。RK3588作为一款高性能处理器&#xff0c;其稳定运行高度依赖于RK806电源管理芯片的精准供电。我曾参与过多个采用这套方案…...

RAG实战解析:如何通过检索增强生成提升知识密集型NLP任务性能

1. RAG技术为什么能改变知识密集型NLP任务格局 第一次听说RAG&#xff08;Retrieval-Augmented Generation&#xff09;这个概念时&#xff0c;我正被一个开放域问答项目折磨得焦头烂额。当时我们用纯BART模型生成的答案总是出现事实性错误&#xff0c;比如把"特斯拉创始人…...

告别官方包!手把手教你从Gitee源码编译kkFileView v4.4.0(附Maven打包避坑点)

从源码到部署&#xff1a;深度解析kkFileView v4.4.0全流程编译实战 在企业级文档处理场景中&#xff0c;kkFileView作为一款开箱即用的文件预览解决方案&#xff0c;其源码编译能力往往被大多数开发者忽视。本文将打破常规安装包依赖&#xff0c;带你深入源码编译的全链路过程…...

可解释推荐-TKDE 24|基于强化路径推理的反事实解释优化策略

1. 为什么我们需要更好的推荐解释&#xff1f; 你有没有遇到过这种情况&#xff1a;某购物平台突然给你推荐了一款完全不符合你品味的商品&#xff0c;或者视频平台连续推送你根本不感兴趣的短视频&#xff1f;这时候你可能会想&#xff1a;"这个推荐系统到底是怎么想的&…...

通义千问3-Reranker-0.6B入门指南:app.py核心逻辑解析+自定义路由扩展

通义千问3-Reranker-0.6B入门指南&#xff1a;app.py核心逻辑解析自定义路由扩展 1. 引言 如果你正在寻找一个既轻量又强大的中文重排序模型&#xff0c;那么通义千问3-Reranker-0.6B绝对值得你花时间了解一下。这个只有6亿参数的模型&#xff0c;在文本检索和排序任务上的表…...

特斯拉行车记录仪视频合并终极指南:高效处理多摄像头记录的专业方案

特斯拉行车记录仪视频合并终极指南&#xff1a;高效处理多摄像头记录的专业方案 【免费下载链接】tesla_dashcam Convert Tesla dash cam movie files into one movie 项目地址: https://gitcode.com/gh_mirrors/te/tesla_dashcam 特斯拉行车记录仪视频智能合并工具tesl…...

机器人中的多模态——RoboBrain

论文下载地址&#xff1a;arxiv.org/pdf/2502.21257 代码地址&#xff1a;https://github.com/FlagOpen/RoboBrain/ 数据集下载地址&#xff1a;https://github.com/FlagOpen/ShareRobot/ 目录1.关于RoboBrain1.1 RoboBrain的潜在应用场景1.2 RoboBrain具备哪些能力2.关于Share…...