前端和后端的JSON数据交互

article/2025/8/27 0:00:14

因为之前一直在学后端方面的内容,对于前端这块的知识一直半懂半不懂。昨天学了ajax,一些知识点记录下。

前端知识

最重要的两种请求方式:GETPOST
GET : 有请求参数,无请求体
POST : 有请求体,但也可以有请求参数

通过英语单词的命名,我们其实可以推测这两个方法适用于什么场景。
‘get’:获取查询数据库的内容,前端获取数据
‘post’:提交。前端提交数据,对数据库里的数据进行增删改

拿出我最近一直在看的开源项目renren-security,从swagger中可以更明显的对比GET和POST方法
在这里插入图片描述
无论是请求还是响应都具备四部分内容:请求行(响应行),请求头(响应头),空行,请求体(响应体)
抓包百度
在这里插入图片描述
请求头/响应头中有个重要header:content-type:它的作用是告诉接收方用什么方式来解析对应的body数据。
常见的有:application/x-wwwform-urlencoded(表单提交),text/plain(文本),application/json

前后端数据交互

前后端的数据交互是通过json实现的。
json的两种形式:json字符串,json对象

后端中controller层在接收请求时,通常会用到两个注解@RequestParam和@RequestBody,用中文解释就是请求参数,请求体。
@RequestParam用于get方法,
@RequestBody用于post方法。

1)当然你不使用注解也可以接收请求参数或请求体的数据

<script>$('button').click(function () {$.ajax({url:"http://localhost:8080/ajax",//post方法method:"post",//传过去的数据data:{name:'leib',age:'23'},success:function (response) {console.log(response);}})})</script>

在Person类中有对应的name属性和age属性,springmvc会自动映射

@RequestMapping("/ajax")//不用任何注解接收请求体数据public Person ajax(Person p){return p;}

在这里插入图片描述
通过抓包发现,请求方式为POST,请求体的数据格式为表单数据。
但从后端响应的数据为json对象。
controller层在返回对象时,会自动将java对象转为json对象。

但是不是说json有两种格式嘛…一个json对象,一个json字符串。你怎么证明你获得的就是json对象而不是json字符串呢。
在前端代码中只需修改一处即可证明
在这里插入图片描述
如果是对象,那么就有属性,我就来打印这个属性,有数据就可以说明是json对象
在这里插入图片描述

在前端页面添加contentType:‘application/json’,表明前端在告诉服务器我的数据已经转为json格式,请你也用json格式解析。
对于JSON格式,springmvc无法解析,需要添加@RequestBody。
在这里插入图片描述
2)注解@RequestBody
注解@RequestBody常用来处理contentType='application/json’的内容,当形参为javabean时,spring就会将request body中的json对象解析成该参数类型的Javabean对象。
使用JQuery框架,前端传进的json数据必须是json字符串,后端接收时会将json字符串转成json对象
如果你前端的数据直接是json对象,则会报如下错误
在这里插入图片描述

因为jQuery默认的conten-type为表单提交,因此如果使用@RequestBody,在后台会报如下错误。

Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]

**注意:如果使用@RequestBody String str,你仍然可以成功的解析该表单格式的数据并进行使用。**上述报错是因为服务器的@RequestBody在将数据用表单提交的方式解析后,无法与person对象的属性相映射。
3)axios框架
使用axios框架来帮助开发者传递json,因为axios默认的content-type为application/json,所以无需设置contentType。
同时使用post方法,可以实现传递json对象,而无需在前端将json对象转成json字符串

get请求方式 传递给后台的参数都是字符串形式,无法传递json对象 或数组对象等
post请求方式则可以实现,但若后台接口要求必须用get方式传递对象给后台,需要装插件

    axios.post("/axios",{name:"admin",age:"23"},{//url请求参数params: {id:200,vip:9},//请求头headers:{name:'123456'}}).then(function(data){console.log(data)})

在这里插入图片描述
@RequestBody接收请求体中的表单数据。

1、application/x-www-form-urlencoded
@requestbody能解析,但springmvc会进行解析,所以通常不用@requestbody。
2、multipart/form-data
@requestbody不能解析
3、application/json,application/xml等
@requestbody能解析,springmvc不会进行解析,所以必须要加@requestbody注解

参考:
https://www.cnblogs.com/chenhao0302/p/9909067.html
https://www.cnblogs.com/wxh0929/p/11132073.html


http://chatgpt.dhexx.cn/article/XNMkcgBd.shtml

相关文章

JAVA前端与后端交互面试题

1.前端与后端交互面试题 1.1. 描述Servlet调用过程&#xff1f; 答案&#xff1a; &#xff08;1&#xff09;在浏览器输入地址&#xff0c;浏览器先去查找hosts文件&#xff0c;将主机名翻译为ip地址&#xff0c;如果找不到就再去查询dns服务器将主机名翻译成ip地址。 &…

java后端与前端的交互_前端和后端数据交互的基本知识和常见方式

一。首先了解前端&#xff0c;后端&#xff0c;数据三者的关系。 1.前端常常是是html&#xff0c;css&#xff0c;js三者的构成的页面的总称。运行在客户端。以浏览器为例。 2.后端常常是后端语言。比如php&#xff0c;java等写的一些脚本。来操作服务器。 3.数据&#xff0c;数…

前后端数据交互

简单实现前后端数据交互 功能要求主要涉及框架后端新建项目新建数据库编写实体类编写映射类编写控制器 前端headbody1.用户接口 UI2. JS 交互 运行测试总结 功能要求 简单实现 员工信息 从 后端 服务器 数据库 加载 并 动态渲染 在Web端&#xff0c;以及Web端新增 员工信息 发…

前端和后端如何进行交互?

背景 目前互联网应用呈现方式基本都是app客户端和web端&#xff0c;其次是移动网站和小程序。以app客户端或web端为例子&#xff08;统一认为前端&#xff09;&#xff0c;前端负责用户的交互与数据收集与展示&#xff0c;数据经后台处理存储在数据库。设计师在参与项目时&…

新手入门前端与后端交互案例(HTML+Java+Axios)

需求分析 前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果. 项目结构 后端项目结构 实现步骤 导入相关依赖包 <parent><grou…

web开发中前端页面是如何跟后端服务器数据交互的

后端服务器一般是指servlet容器&#xff0c;用于执行java源程序 常见的网页有html&#xff0c;htm,shtml&#xff0c;asp&#xff0c;aspx&#xff0c;php&#xff0c;jsp等格式 前两个常用于静态网页&#xff0c;后面几个常用于动态网页。 这里前端网页以比较常见的 xx.html…

前端与后端接口的交互案例

一、案例描述 1&#xff0c;前端页面提供用户名&#xff0c;密码输入框。 2&#xff0c;通过Ajax发送请求到后端Serlvet。 3&#xff0c;后端Serlvet处理请求&#xff0c;根据输入的用户名和密码返回给前端不同信息 前端访问后端接口通过后端提供的的URL 二、主要代码 1、前…

前端和后端 数据交互的基本知识

一、首先了解前端、后端、数据三者的关系 1) 前端通常是html&#xff0c;css&#xff0c;js三者构成的页面的总称。运行在客户端。以浏览器为例。 2) 后端是指后端程序。比如java&#xff0c;php等编写的一些服务。用来操作服务器。 3) 数据&#xff0c;数据都存放在服务器上…

前端和后端交互的方式

1.前端开发与后台交互的方式 &#xff08;1&#xff09;form提交 同步请求 &#xff08;2&#xff09;Ajax提交 异步请求 发送json对象 一 、Ajax&#xff1a;异步的javascript和XML 主要优点&#xff1a; 1.异步请求&#xff0c;不妨碍用户浏览页面或者其他操作。 2.局部刷…

树与树的存储结构+二叉树的遍历

树的存储结构&#xff1a; 三序说的是根节点的访问顺序 深度优先遍历(先序、 中序和后序) 沿着上图路径行走: 第一次来到某个结点时访问&#xff0c;所得序列为先序遍历序列; 第二次来到某个结点时访问&#xff0c;所得序列为中序遍历序列; 第三次来到某个结点时访问&#xff0…

2023年最新前端面试题

HTML 一、HTML5标记 <header></header> 头标记<nav></nav> 导航标记&#xff0c;表示页面中导航链接部分<!--main标记在一个网页中只能有一个&#xff0c;主要内容区域要区别--> <main></main> 主要内容标记<secti…

每日一题之二叉树

描述 输入一个整数数组&#xff0c;判断该数组是不是某二叉搜索树的后序遍历的结果。如果是则返回 true ,否则返回 false 。假设输入的数组的任意两个数字都互不相同。 数据范围&#xff1a; 节点数量 0 \le n \le 10000≤n≤1000 &#xff0c;节点上的值满足 1 \le val \le 1…

2021最新最全前端面试题(包含HTML、CSS、JavaScript、Vue、React、浏览器、算法与数据结构等)

整理了一些前端面试题,希望对正在找前端工作的伙伴有用。本篇文章内容篇幅较大,主要针对初中级前端开发工程师。 篇幅过长,大家可以先点赞收藏以后慢慢看。 关于HTML 的title和alt属性有什么区别 alt:图片加载失败时,显示在网页上的替代文字title:鼠标(手机端该属性无…

CSS解决盒模型居中的问题,分分钟搞定!

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…

培训前端开发机构,CSS文本样式值

一、简历的准备 简历制作是很重要的一个环节&#xff0c;一份好的简历会给面试官留下很不错的印象&#xff0c;也有助于你顺利通过简历筛选环节。 个人基本信息&#xff1a;主要是姓名&#xff0c;联系方式&#xff0c;邮箱&#xff0c;学历等&#xff1b;技术技能&#xff1…

学习路线图必不可少,CSS字体样式的使用

标签语义化&#xff1a; 语义和默认样式的区别&#xff1a; 默认样式是浏览器设定的一些常用tag的表现形式&#xff1b;语义化的主要目的就是让大家直观的认识标签和属性的用途和作用&#xff1b; 标签语义化作用&#xff1a; 当只有HTML页面时&#xff0c;没有CSS&#xf…

web前端开发自学难吗,CSS颜色基本样式

字节跳动算法题 链表 面试题&#xff1a;反转单向链表 题目需要将一个单向链表反转。思路很简单&#xff0c;使用三个变量分别表示当前节点和当前节点的前后节点&#xff0c;虽然这题很简单&#xff0c;但是却是一道常考题 以下是实现该算法的代码 var reverseList funct…

CSS的浮动属性,终获offer

前言 最近在准备面试&#xff0c;然后复习下之前写过的项目&#xff0c;书籍&#xff0c;笔记&#xff0c;文章。一看很多知识点都没有印象&#xff0c;最可拍的是连自己为了防止忘记写的文章竟然都感觉不是自己写的。有些开始怀疑人生了。 好了&#xff0c;废话少说&#xf…

CSS介绍,这些知识你必须拿下

前言 跳槽&#xff0c;这在 IT 互联网圈是非常普遍的&#xff0c;也是让自己升职加薪&#xff0c;走上人生巅峰的重要方式。那么作为一个普通的Android程序猿&#xff0c;我们如何才能斩获大厂offer 呢&#xff1f; 疫情向好、面试在即&#xff0c;还在迷茫踌躇中的后浪们&…

web开发在线培训,CSS浮动实战

一、简历的准备 简历制作是很重要的一个环节,一份好的简历会给面试官留下很不错的印象,也有助于你顺利通过简历筛选环节。 个人基本信息:主要是姓名,联系方式,邮箱,学历等;技术技能:对了解、熟练掌握、精通这类词有概念,不要随便用精通;因为面试官一般会根据简历内容…