前端和后端的JSON数据交互
因为之前一直在学后端方面的内容,对于前端这块的知识一直半懂半不懂。昨天学了ajax,一些知识点记录下。
前端知识
最重要的两种请求方式:GET、POST。
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
前端和后端的JSON数据交互相关推荐
- 前端和后端怎么进行数据交互的_前端VS后端
前言 对于广义上的前端来说,上游是接口, 下游是界面. 对于后端来说,上游是数据库, 下游是接口. 前端的工作的核心是交互,消费接口的数据,给到用户.我们分别来看这几个方面:前端能够抵达的最上游是接口 ...
- 使用@RequestBody 接收前端传到后端的json数据时,页面出现415,获取不到Cookie
文章目录 1.使用@RequestBody 接收前端传到后端的json数据时,页面出现415 2.获取Cookie时,使用F12,查看Cookie储存时的路径,只有路径一致才可以获取Cookie 3. ...
- java后端 返回json_Java后端返回Json数据
Java后端返回Json数据 Jackson 导包 com.fasterxml.jackson.core jackson-databind 2.12.1 创建ObjectMapper对象,调用writ ...
- json数据交互与@RequestBody
@RequestBody @RequestBody注解用于读取http请求的内容(字符串),通过springmvc提供的HttpMessageConverter接口将读到的内容(json数据)转换为j ...
- Spring MVC JSON数据交互(附带实例)
Spring MVC 在数据绑定的过程中需要对传递数据的格式和类型进行转换,它既可以转换 String 等类型的数据,也可以转换 JSON 等其他类型的数据.本节将针对 Spring MVC 中 JS ...
- JSON数据交互和RESTful支持
JSON数据交互和RESTful支持 SpringMVC在数据绑定的过程中,需要对传递数据的格式和类型进行转换,它既可以转换String类型的数据,也你能够转换JSON等其他类型的数据. JSON数据 ...
- 前端与后端之间的数据传递
前端与后端之间的数据传递 前端页面 页面结构 index.html 代码 后台服务 新建[Dynamic Web Project] 项目结构 Servlet文件 解决跨域问题 效果展示 JSONObj ...
- SpringMVC入门(二)—— 参数的传递、Controller方法返回值、json数据交互、异常处理、图片上传、拦截器
SpringMVC入门(二)-- 参数的传递.Controller方法返回值.json数据交互.异常处理.图片上传.拦截器 参考文章: (1)SpringMVC入门(二)-- 参数的传递.Contro ...
- 六、Springmvc json数据交互
editItem.jsp <script type="text/javascript">$(function(){alert(111);var params = '{& ...
最新文章
- 《慕客网:IOS基础入门之Foundation框架初体验》学习笔记 三 NSArray
- Python+Selenium 自动化-指定chrome驱动运行selenium实例演示,运行指定位置下的浏览器驱动
- [Google Guava] 1.1-使用和避免null
- 集成极光推送遇到的问题
- oracle 数据结构部署,
- www.cnblog.org无法访问了
- PHP语法像C,PHP编程语法的三个魅力之处
- VS当前不会命中断点 还没有为该文档加载任何符号
- 计算机的显卡控制面板在哪里,nvidia控制面板在哪里打开
- Netscreen的岁月 from Sina
- 微信朋友圈装x代码_微信朋友圈写入代码 微信朋友圈代码大全
- 2.3.1 浮点数的表示
- NEURAL MACHINE TRANSLATION BY JOINTLY LEARNING TO ALIGN AND TRANSLATE-论文翻译
- 拨测技术确保网络稳定性和服务质量
- GRNN神经网络学习笔记_matlab
- oracle单实例通过dataguard迁移到RAC 转
- linux查看gcc/cmake/当前版本
- HarmonyOS Connect伙伴峰会:鸿湖万联全栈式使能鸿蒙智联
- Semantic UI 之 手风琴 accordion
- —— 约瑟夫环(自杀环)的数学解法