(5)SpringMVC处理携带JSON格式(“key“:value)请求数据的Ajax请求

news/2024/2/21 10:27:28

SpringMVC处理Ajax

参考文章数据交换的常见格式,如JSON格式和XML格式

请求参数的携带方式

浏览器发送到服务器的请求参数有name=value&...(键值对){key:value,...}(json对象)两种格式

  • URL请求会将请求参数以键值对的格式拼接到请求地址后面,form表单的GET和POST请求会将请求参数以键值对的格式存储到请求报文的请求体中
  • 发起Ajax请求时,可以将请求参数以Json的格式存储到请求报文的请求体中

在这里插入图片描述

控制器方法获取两种格式请求参数的方式

  • name=value&键值对格式发送到服务器的请求参数的可以通过request对象的API获取,即在SpringMVC中可以直接通过控制器方法的形参获取请求参数
  • {key:value,}Json格式的请求参数时无法通过request对象获取,在SpringMVC中需要使用@RequestBody注解标识控制器方法的形参获取请求参数

发起Ajax请求的方式

现在比较流行的开发方式为异步调用, 前后台以异步Ajax请求的方式进行交换数据,传输的数据使用的是JSON

  • Ajax请求发送后,当浏览器接收到服务器的响应内容后不会重新加载整个页面,只会更新网页的部分实现局部刷新的效果

使用vue.js提供的axios方法发起Ajax请求,方法的参数是一个配置对象

  • method: 指定请求的方式
  • url: 指定请求的路径
  • paramsdata: 指定请求的参数

paramsdata属性的区别

  • 使用params属性时无论发送GET还是POST请求,请求参数都是以name=value&name=value的格式拼接到请求地址后,获取请求参数时通过requset对象的API
  • 使用data属性时,只能发送POST请求,请求参数是以json的格式存储到请求报文的请求体中,获取请求参数时需要相关的jar包将请求体中的json数据转成Java对象

使用axios({配置对象})方法发起Ajax请求,使用params属性将请求参数以name=value&name=value的格式拼接到请求地址后

testAjax:function (event) {axios({method:"post",url:event.target.href,params:{username:"admin",password:"123456"}}).then(function (response) {//服务器处理Ajax请求成功后执行的回调函数// 服务器响应的结果都会被封装在response对象中,响应的数据都在data属性中alert(response.data);});

使用axios.post(url,[data])方法和axios.get(url)方法发起Ajax请求,使用data属性将请求参数以json的格式存储到请求报文的请求体中

testAjax(){axios.post("/SpringMVC/test/ajax",{username:"admin",password:"123456"}).then(response=>{console.log(response.data);});
},

处理键值对的请求参数

使用axios({配置对象})方法发起Ajax请求,使用params属性将请求参数以name=value&name=value的格式拼接到请求地址后

<div id="app"><!--请求超链接--><a @click="testAxios()" th:href="@{/testAxios}">SpringMVC处理ajax</a>
</div>
<script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
<script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
<script type="text/javascript">var vue = new Vue({el:"#app",methods:{testAjax:function (event) {axios({method:"post",url:event.target.href,params:{username:"admin",password:"123456"}}).then(function (response) {//服务器处理Ajax请求成功后执行的回调函数// 服务器响应的结果都会被封装在response对象中,响应的数据都在data属性中alert(response.data);});// 阻止超链接默认的跳转行为event.preventDefault();}}});
</script>

编写控制器方法处理浏览器发起的Ajax请求,直接在控制器方法中的声明同名的形参获取请求地址中的请求参数

@RequestMapping("/testAxios")
public void testAxios(String username, String password,HttpServletResponse response){System.out.println("username:"+username+",password:"+password);// 由于我们发起的是Ajax请求就是用来做局部刷新的即页面不能跳转,所以不能直接返回视图名称转发或重定向到一个页面,而是响应数据response.getWriter().write("hello,axios");
}

@RequestBody注解处理json格式

使用axios.post(url,[data])方法和axios.get(url)方法发起Ajax请求,将请求参数以json的格式存储到请求报文的请求体中

testAjax(){axios.post("/SpringMVC/test/ajax",{username:"admin",password:"123456"}).then(response=>{console.log(response.data);});
},testRequestBody(){axios.post("/SpringMVC/test/RequestBody/json",{username:"admin",password:"123456",age:23,gender:"男"}).then(response=>{console.log(response.data);});
},

@RequestBody注解可以用来标识控制器方法的形参, 默认可以获取当前请求的请求体的全部内容然后为注解所标识的String类型的形参赋值

  • 将请求中请求体所包含的数据传递给请求参数,此注解一个处理器方法只能使用一次
@RequestMapping("test/ajax")
public void testRequestBody(@RequestBody String requestBody){// requestBody:{"username":"admin","password":"123456"}System.out.println("requestBody:"+requestBody);// 由于我们发起的是Ajax请求就是用来做局部刷新的即页面不能跳转,所以不能直接返回视图名称转发或重定向到一个页面,而是响应数据response.getWriter().write("hello,axios");
}

需求: 使用@RequestBody注解获取请求体中json格式的请求参数,并且将json格式的请求参数转化为指定类型的Java对象或Map集合

第一步: 导入jackson的依赖

<dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.12.1</version>
</dependency>

第二步: 在SpringMVC的配置文件中开启mvc的注解驱动

<!--开启mvc注解驱动-->
<mvc:annotation-driven />

第三步: 指定实体类用来封装请求体中json格式的请求参数

public class User {private Integer id;private String username;private String password;private Integer age;private String gender;public User() {}public User(Integer id, String username, String password, Integer age, String gender) {this.id = id;this.username = username;this.password = password;this.age = age;this.gender = gender;}//getter和setter以及toString方法
}

第四步: 发起POST请求方式的Ajax请求,将请求参数以json的格式存储到请求报文的请求体中,然后传输到服务器

testRequestBody(){axios.post("/SpringMVC/test/RequestBody/json",{username:"admin",password:"123456",age:23,gender:"男"}).then(response=>{console.log(response.data);});
},

第五步: 使用@RequestBody注解获取请求体中json格式的请求参数然后转化为指定的实体类对象或Map集合

// 将请求体中json格式的数据转换为map集合
@RequestMapping("/test/RequestBody/json")
public void testRequestBody(@RequestBody Map<String, Object> map,HttpServletResponse response) throws IOException {//{username=admin, password=123456,age=23,gender=男}System.out.println(map);response.getWriter().print("hello,axios");
}// 将请求体中json格式的数据转换为User对象
@RequestMapping("/test/RequestBody/json")
public void testRequestBody(@RequestBody User user, HttpServletResponse response) throws IOException {//User{id=null, username='admin', password='123456', age=null,gender='null'}System.out.println(user);response.getWriter().print("hello,axios");
}

JSON格式的扩展

控制器方法参数前添加@RequestBody注解,将请求体中的Json数组映射到List集合类型形参的String类型对象中

在这里插入图片描述

@RequestMapping("/jsonArrayParam")@ResponseBodypublic String jsonArrayParam(@RequestBody List<String> hobbies) {//  JSON数组参数传递hobbies --> [唱, 跳, Rap, 篮球]System.out.println("JSON数组参数传递hobbies --> " + hobbies);return "{'module':'json array param'}";}

将请求体中的嵌套的Json对象数据映射到POJO对象形参的属性中

   {"name":"菲茨罗伊","age":"27","address":{"city":"萨尔沃",   "province":"外域"}}
@RequestMapping("/jsonPojoParam")
@ResponseBody
public String jsonPojoParam(@RequestBody User user) {// User{name=’菲茨罗伊’, age=27, address=Address{province=’外域’, city=’萨尔沃’}}System.out.println("JSON对象参数传递user --> " + user);return "{'module':'json pojo param'}";
}

将请求体中包含JSON对象的数组映射到集合形参的多个POJO对象属性中

[{"name":"菲茨罗伊","age":"27","address":{"city":"萨尔沃","province":"外域"}},{"name":"地平线","age":"136","address":{"city":"奥林匹斯","province":"外域"}}
]
@RequestMapping("/jsonPojoListParam")
@ResponseBody
public String jsonPojoListParam(@RequestBody List<User> users) {/*user —> [User{name=’菲茨罗伊’, age=27, address=Address{province=’外域’, city=’萨尔沃’}},User{name=’地平线’, age=136, address=Address{province=’外域’, city=’奥林匹斯’}}]*/System.out.println("JSON对象数组参数传递user --> " + users);return "{'module':'json pojo list param'}";
}

http://www.ppmy.cn/news/1142698.html

相关文章

leetcode610.判断三角形

表: Triangle ------------------- | Column Name | Type | ------------------- | x | int | | y | int | | z | int | ------------------- 在 SQL 中&#xff0c;(x, y, z)是该表的主键列。 该表的每一行包含三个线段的长度。对每三个线段…

HarmonyOS/OpenHarmony原生应用-ArkTS万能卡片组件Stack

堆叠容器&#xff0c;子组件按照顺序依次入栈&#xff0c;后一个子组件覆盖前一个子组件。该组件从API Version 7开始支持。可以包含子组件。 一、接口 Stack(value?: { alignContent?: Alignment }) 从API version 9开始&#xff0c;该接口支持在ArkTS卡片中使用。 二、…

Redis作为缓存,mysql的数据如何与redis进行同步?

Redis作为缓存&#xff0c;mysql的数据如何与redis进行同步&#xff1f; 一定要设置前提&#xff0c;先介绍业务背景 延时双删 双写一致性:当修改了数据库的数据也要同时更新缓存的数据&#xff0c;缓存和数据库的数据要保持一致 读操作:缓存命中&#xff0c;直接返回;缓存未…

使用存储过程批量修改表数据

背景如下&#xff1a;线上有一个表的字段保存的是逗号分隔的图片链接集合&#xff0c;类似"http://123.jpg?asssxasda,http://12333.jpg?asssxasda1"这种。因为配置错误导致部分链接的后缀错误&#xff0c;图片无法访问。需要去掉每个链接&#xff1f;之后的内容&a…

voc数据集格式与yolo数据集格式的区别及相互转化

Pascal VOC数据集是目标检测领域最常用的标准数据集之一&#xff0c;几乎所有检测方向的论文都会给出其在VOC数据集上训练并评测的效果。VOC数据集包含的信息非常全&#xff0c;它不仅被拿来做目标检测&#xff0c;也可以拿来做分割等任务&#xff0c;因此除了目标检测所需的文…

网络安全国家队-安防思考与实践

按照工信部“三同步”安全建设的统一要求&#xff0c;本项目的实施应具备符合等级保护要求的安全防护措施&#xff08;主要为传输控制、防火墙隔离、入侵检测、安全审计等网络安全措施&#xff1b;操作系统安全、数据库安全、防病毒管理、安全审计等基础系统安全措施&#xff0…

【Oracle】Oracle系列之十六--数据库备份

文章目录 往期回顾1. 数据库备份的分类1.1 逻辑备份与物理备份&#xff08;1&#xff09;逻辑备份&#xff08;2&#xff09;物理备份&#xff08;3&#xff09;归档模式与非归档模式 1.2 完全备份/差异备份/增量备份 2. Oracle 逻辑备份2.1 EXP/IMP&#xff08;1&#xff09;E…

在开发APP过程中外包我们经常会遇到哪些问题?我们该如何避免?

虽然选择一个外包公司有很多坑&#xff0c;但是我们有的时候不得不选择一个外包公司&#xff0c;所以选择外包的时候我们要注意一些细节可以有效的区分开外包app产品的可靠性还是至关重要&#xff01;希望我整理的这些对各位有需要的同学有所帮助&#xff01; 首先我们先从公司…

light client轻节点简介

1. 引言 前序博客&#xff1a; Helios——a16z crypto构建的去中心化以太坊轻节点 去中心化和自我主权对于Web3的未来至关重要&#xff0c;但是这些理想并不总适用于每个项目或应用程序。在非托管钱包和bridges等工具中严格优先考虑安全性而不是便利性的用户&#xff0c;可选…

flink redis connector需要防止包冲突

1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 <dependency><groupId>org.apache.bahir</groupId><artifactId

kafka与zookeeper的集群

基础配置 systemctl stop firewalld && systemctl disable firewalld setenforce 0 sed -i s/SELINUXenforcing/SELINUXdisabled/ /etc/selinux/configvi /etc/hosts ip1 node1 ip2 node2 ip3 node3zookeeper介绍 zookeeper是一个分布式的协调服务&#xff0c;主要用…

在PicGo上使用github图床解决typora上传csdn图片不显示问题(保姆级教程)

文章目录 在PicGo上使用github图床解决typora上传csdn图片不显示问题&#xff08;保姆级教程&#xff09;1、typora上传csdn图片不显示&#xff08;外链图片转存失败&#xff09;2、PicGo2.1、PicGo下载2.2、PicGo使用2.2.1、对PicGo完成基本的配置2.2.2、配置github图床2.2.3、…

ws升级为wss

需求&#xff1a;项目中需要使用netty&#xff0c;本地测试的时候使用的是ws&#xff0c;然后要部署到服务器上&#xff0c;使用https连接&#xff0c;https下就不能用ws了&#xff0c;必须升级到wss 1.阿里云申请免费证书 2.保存证书到本地目录 3.修改代码 SslUtil 工具类…

内存池的学习

&#xff11;&#xff09;代码如下&#xff1a; //检测内存泄露的方法&#xff1a;自定义malloc和free //内存池难点&#xff1a;不确定分配和释放的时机&#xff1b; //注意页和块的关系->: 1page128count; //头插法建立单链表完整代码 #include <memory> #include …

MySQL-1(12000字详解)

一&#xff1a;数据库的引入 数据库在我们以后工作中是一个非常常用的知识&#xff0c;数据库用来存储数据&#xff0c;但是有些同学可能就会疑惑了&#xff0c;存储数据用文件就可以了&#xff0c;为什么还要弄个数据库呢&#xff1f; 文件保存数据有以下几个缺点&#xff1…

CS5801电路设计|HDMI转EDP转接板方案|HDMI2.0转EDP数据采集卡方案

CS5801国产(北京集睿致远&#xff09;研发HDMI转DP/EDP(4K60)转换器方案芯片,其设计HDMI转EDP转接板方案电路&#xff1a; CS5801输入端可以是1080P、4K30、4K60HZ这三种规格,输出的接口可以是DP信号接口,或者是EDP信号接口,输入端HDMI由4路信号组成&#xff0c;支持1.62Gbps、…

Google-CTF-2016-Stego.pcap数据包解析

Google-CTF-2016&#xff08;a-cute-stegosaurus-100&#xff09; 前言&#xff1a;别人发的题目 随便看看 记录一下解题过程&#xff01; 知识点: 在报文段中有 6Bit 的状态控制码&#xff0c; 分别如下tcp URG&#xff1a;紧急比特&#xff08;urgent&#xff09;&#x…

100M服务器能同时容纳多少人访问?

100M的服务器带宽能够同时容纳的用户访问量需要考虑以下几个关键因素: &#x1f449;1.单个用户的平均访问流量大小 这取决于网站内容,是否有多媒体等。一般文本类网站每用户每次访问在50-100KB。 &#x1f449;2.每个用户的平均访问页面 通常每次访问会打开多个页面 &…

Python中跨越多个文件使用全局变量

嗨喽&#xff0c;大家好呀~这里是爱看美女的茜茜呐 这个琐碎的指南是关于在 Python 中跨多个文件使用全局变量。 但是在进入主题之前&#xff0c;让我们简单地看看全局变量和它们在多个文件中的用途。 &#x1f447; &#x1f447; &#x1f447; 更多精彩机密、教程&#xff…

Reactor 模式网络服务器【I/O多路复用】(C++实现)

前导&#xff1a;本文是 I/O 多路复用的升级和实践&#xff0c;如果想实现一个类似的服务器的话&#xff0c;需要事先学习 epoll 服务器的编写。 友情链接&#xff1a; 高级 I/O【Linux】 I/O 多路复用【Linux/网络】&#xff08;C实现 epoll、select 和 epoll 服务器&#x…
最新文章