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

SpringMVC处理Ajax

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

请求参数的携带方式

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

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

在这里插入图片描述

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

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

发起Ajax请求的方式

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

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

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

  • method: 指定请求的方式
  • url: 指定请求的路径
  • params和data: 指定请求的参数

params和data属性的区别

  • 使用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.mzph.cn/news/102612.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【深度学习】UniControl 一个统一的扩散模型用于可控的野外视觉生成

【深度学习】UniControl 一个统一的扩散模型用于可控的野外视觉生成

论文&#xff1a;https://arxiv.org/abs/2305.11147 代码&#xff1a;https://github.com/salesforce/UniControl#data-preparation docker快速部署&#xff1a;https://qq742971636.blog.csdn.net/article/details/133129146 文章目录 AbstractIntroductionRelated WorksUniCo…
阅读更多...
【Linux】HTTPS协议

【Linux】HTTPS协议

文章目录 &#x1f4d6; 前言1. 引入https协议2. 常见的加密方式2.1 对称加密&#xff1a;2.2 非对称加密&#xff1a;2.3 数据摘要&&数据指纹&#xff1a; 3. 对加密方式的探究3.1 只使用对称加密&#xff1a;3.2 只使用非对称加密&#xff1a;3.3 双方都使用非对称加…
阅读更多...
SQL和Python，哪个更容易自学？哪个更适合数据工作的编程新手？

SQL和Python，哪个更容易自学？哪个更适合数据工作的编程新手？

如果你想从事数据工作&#xff0c;比如数据分析、数据开发、数据科学等&#xff0c;你可能会遇到这样的问题&#xff1a;SQL和Python哪个更容易自学&#xff1f;哪个更有用&#xff1f;哪个更有前途&#xff1f;其实这两种语言都是数据工作的重要技能&#xff0c;但它们的特点和…
阅读更多...
vue拦截器是什么，如何使用

vue拦截器是什么，如何使用

Vue拦截器是一种用来拦截并处理HTTP请求和响应的机制&#xff0c;它可以在请求或响应发送前或后进行一些预处理或处理。在Vue中&#xff0c;可以使用axios库来实现拦截器&#xff0c;axios库是一个基于Promise的HTTP客户端&#xff0c;可以用于浏览器和Node.js平台。 使用axio…
阅读更多...
计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度（matlab代码）

计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度（matlab代码）

目录 1 主要内容 系统结构 CCPP-P2G-燃气机组子系统 非线性处理缺陷 2 部分代码 3 程序结果 4 程序链接 1 主要内容 该程序参考《计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度》模型&#xff0c;主要实现的是计及电转气协同的含碳捕集与垃圾焚烧虚拟电厂优化调度…
阅读更多...
智能井盖传感器：提升城市安全与便利的利器

智能井盖传感器：提升城市安全与便利的利器

在智能化城市建设的浪潮中&#xff0c;WITBEE万宾智能井盖传感器&#xff0c;正以其卓越的性能和创新的科技&#xff0c;吸引着越来越多的关注。本文小编将为大家详细介绍这款产品的独特优势和广阔应用前景。 在我们生活的城市中&#xff0c;井盖可能是一个最不起眼的存在。然而…
阅读更多...
通过动态IP解决网络数据采集问题

通过动态IP解决网络数据采集问题

前言 网络数据采集是目前互联网上非常重要且广泛应用的技术之一&#xff0c;它可以帮助我们获取互联网上各种类型的数据&#xff0c;并将其转化为可用的信息。然而&#xff0c;一些网站为了保护其数据被滥用&#xff0c;采取了一系列的限制措施&#xff0c;其中包括对访问者的…
阅读更多...
java：使用Jedis操作redis

java：使用Jedis操作redis

Redis是一个基于内存的高性能键值存储数据库&#xff0c;支持多种数据结构&#xff0c;如字符串、列表、集合等。在Java中&#xff0c;我们可以通过Jedis客户端来操作Redis数据库。 安装Jedis客户端 在Java应用程序中使用Jedis客户端之前&#xff0c;需要将其添加到项目中。可…
阅读更多...
lNmp安装：

lNmp安装：

一、LNMP LNMP架构是目前成熟的企业网站应用模式之一&#xff0c;指的是协同工作的一整套系统和相关软件&#xff0c; 能够提供动态Web站点服务及其应用开发环境。LNMP是一个缩写词&#xff0c;具体包括Linux操作系统、nginx网站服务器、MySQL数据库服务器、 PHP&#xff08;或…
阅读更多...
各类高危漏洞介绍及验证方式教程（一）

各类高危漏洞介绍及验证方式教程（一）

本期整理的漏洞验证教程约包含50多类漏洞&#xff0c;分多个章节编写&#xff0c;可从以下链接获取全文&#xff1a; 各类高危漏洞验证方式.docx (访问密码: 1455) 搭建dvwa测试环境基础教程.docx(访问密码: 1455) web逻辑漏洞挖掘快速入门基础教程.docx(访问密码: 1455) 01 Ca…
阅读更多...
十一、对象的新增方法

十一、对象的新增方法

对象的新增方法 1. Object.is()&#xff08;1&#xff09;Object.is() 与 行为基本一致&#xff08;2&#xff09;两个不同之处&#xff1a; 0 不等于 -0&#xff0c;NaN 等于自身。 2. Object.assign() 用于【对象的合并】&#xff08;1&#xff09;Object.assign(target, so…
阅读更多...
salesforce的按钮执行js代码如何链接到apex代码

salesforce的按钮执行js代码如何链接到apex代码

在Salesforce中&#xff0c;你可以通过自定义JavaScript按钮或链接来触发Apex代码的执行。这可以通过使用JavaScript Remoting或Visualforce页面来实现。以下是一些步骤来将JavaScript按钮与Apex代码链接起来&#xff1a; 使用JavaScript Remoting链接JavaScript按钮到Apex代码…
阅读更多...
WPF向Avalonia迁移（三、项目结构）

WPF向Avalonia迁移（三、项目结构）

前提&#xff1a; Avalonia版本11.0.0 1.配置文件 1.1 添加配置文件 1.2 读取配置文件 添加System.Configuration.ConfigurationManager using Avalonia.Controls; using System.Configuration;namespace AvaloniaApplication7.Views {public partial class MainWindow : W…
阅读更多...
git服务器宕机后，怎么用本地仓库重新建立gitlab服务器(包括所有历史版本)

git服务器宕机后，怎么用本地仓库重新建立gitlab服务器(包括所有历史版本)

一、重新建立 当您的 GitLab 服务器因为某种原因宕机后&#xff0c;您可以使用本地仓库中的备份数据来恢复 GitLab 服务器。以下是一般的步骤&#xff0c;用于重新建立 GitLab 服务器&#xff1a; 注意&#xff1a; 这些步骤假定您已经定期备份了 GitLab 数据&#xff0c;包括…
阅读更多...
如何使用Net2FTP搭建免费web文件管理器打造个人网盘

如何使用Net2FTP搭建免费web文件管理器打造个人网盘

文章目录 1.前言2. Net2FTP网站搭建2.1. Net2FTP下载和安装2.2. Net2FTP网页测试 3. cpolar内网穿透3.1.Cpolar云端设置3.2.Cpolar本地设置 4.公网访问测试5.结语 1.前言 文件传输可以说是互联网最主要的应用之一&#xff0c;特别是智能设备的大面积使用&#xff0c;无论是个人…
阅读更多...
常用的Linux命令及其用法

常用的Linux命令及其用法

常用的Linux命令及其用法 1. ls&#xff1a;列出文件和目录 ls命令用于列出当前目录中的文件和子目录。通过不同的选项&#xff0c;可以显示详细信息、隐藏文件等。 示例&#xff1a; ls -l ls -a2. cd&#xff1a;切换工作目录 cd命令用于切换当前工作目录。通过指定目标…
阅读更多...
H3C交换机的40G堆叠线 ，可以插在普通光口做堆叠吗？

H3C交换机的40G堆叠线 ，可以插在普通光口做堆叠吗？

环境&#xff1a; S6520X-24ST-SI交换机 H3C LSWM1QSTK2万兆40G堆叠线QSFP 问题描述&#xff1a; H3C交换机的40G堆叠线 &#xff0c;可以插在普通光口做堆叠吗&#xff1f; 解答&#xff1a; 1.H3C交换机的40G堆叠线通常是用于连接堆叠模块或堆叠端口的。这些堆叠线通常使…
阅读更多...
【逆向】导出表：1.编写程序打印所有的导出表信息 2.编写GetFunctionAddrByName 3.编写GetFunctionAddrByOrdinal

【逆向】导出表：1.编写程序打印所有的导出表信息 2.编写GetFunctionAddrByName 3.编写GetFunctionAddrByOrdinal

这是从数据目录中获取每个表的地址 void PE::Analyze_Data_Directory(Data& my_data) {my_data.my_Data_Directory nullptr;my_data.my_Data_Directory (PIMAGE_DATA_DIRECTORY*)malloc(16 * sizeof(PIMAGE_DATA_DIRECTORY));void* Temp_ptr my_data.my_optional->D…
阅读更多...
【技术干货】如何快速创建商用照明 OEM APP？

【技术干货】如何快速创建商用照明 OEM APP？

本文介绍了如何在涂鸦 IoT 平台的 App 工作台上创建一款体验版商照 App、正式版 OEM App、上架 App、以及完成通用配置。 OEM App 开发 创建 App 登录 涂鸦 IoT 平台的 App 页面。 单击 创建APP&#xff0c;选择 商照 APP 进行创建。 在提示框里&#xff0c;完善 App 信息…
阅读更多...
通过Node.js获取高德的省市区数据并插入数据库

通过Node.js获取高德的省市区数据并插入数据库

通过Node.js获取高德的省市区数据并插入数据库 1 创建秘钥1.1 登录高德地图开放平台1.2 创建应用1.3 绑定服务创建秘钥 2 获取数据并插入2.1 创建数据库连接工具2.2 请求数据2.3 数据处理2.4 全部代码 3 还可以打印文件到本地 1 创建秘钥 1.1 登录高德地图开放平台 打开开放平…
阅读更多...
最新文章

Copyright @ 2022~2023