SpringMVC处理ajax请求之@ResponseBody注解,将后端数据响应到浏览器

上一篇文章讲到SpringMVC处理ajax请求用到的@RequestBody注解SpringMVC处理ajax请求(@RequestBody注解),ajax向后端传递的数据格式详解-CSDN博客,这个注解帮我们解决了如何将客户端的数据通过json数据传递到服务器,简单说此功能就是我们在一个网站上想添加某个信息到服务器的数据库也就是”增删改查“中的增,而这篇文章就是”查“!我们使用SpringMVC提供的@ResponseBody注解,将控制器中方法的返回值(”查到的数据“)拿到前端显示出来,本篇文章用到的前端模板引擎技术为Thymeleaf。

@ResponseBody用于标识一个控制器方法,可以将该方法的返回值直接作为响应报文的响应体响应到浏览器。

具体功能实现:例,点击一个按钮,显示一个user对象包含的信息。是从后端传json数据到前端显示

本次实验我们需要实现的功能是将控制器封装好的User对象封装到List集合响应到浏览器。

User实体类:

@ResponseBody注解

@RequestBody可以获取请求体信息,使用@RequestBody注解标识控制器方法的形参,当前请求的请求体就会为当前注解所标识的形参赋值。

1、定义一个控制器方法

通过请求实现对网页的访问。SpringMVC实现对网页的访问,在请求控制器中创建处理请求的方法-CSDN博客

@RequestMapping:处理请求和控制器方法之间的映射关系实现对网页的访问

使用@ResponseBody注解标识控制器方法,在方法中,将需要转换为json字符串并响应到浏览器的java对象作为控制器方法的返回值,此时SpringMVC就可以将此对象直接转换为json字符串并响应到浏览器。

@Controller
public class ResponseController {//响应浏览器list集合@RequestMapping("/test/ResponseBody/json")@ResponseBodypublic List<User> testResponseBody(){User user1 = new User(1001,"admin1","123456",23,"男","2023@qq.com");User user2 = new User(1002,"admin2","123456",23,"男","2023@qq.com");User user3 = new User(1003,"admin3","123456",23,"男","2023@qq.com");List<User> list = Arrays.asList(user1, user2, user3);return list;}
}

服务器处理ajax请求之后,大多数情况都需要向浏览器响应一个java对象,此时必须将java对象转换为json字符串才可以响应到浏览器,之前我们使用操作json数据的jar包gson或jackson将java对象转换为json字符串。在SpringMVC中,我们可以直接使用@ResponseBody注解实现此功能。

2、导入jackson依赖

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

SpringMVC的配置文件中设置开启mvc的注解驱动

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

3、网页获取值

点击按钮,将值作为一个表单显示到浏览器

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><base th:href="@{/}"><script th:src="@{/static/js/jquery-1.7.2.js}"></script>
</head>
<body>
<input type="button" value="测试@RespondBody响应浏览器json格式的数据" onclick="testRequestBody()"><br>
<table border="1" id="tid"></table>
</body>
</html>
<script>function testRequestBody(){$.post("test/ResponseBody/json","",function (data){for (var i = 0; i < data.length; i++) {$("#tid").append("<tr><td>"+data[i].id+"</td><td>"+data[i].username+"</td></tr>")}})}
</script>

最终结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/251869.html

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

相关文章

Mybatis Plus 插件失效问题记录

Mybatis Plus 插件失效问题记录 1. 问题发生场景2.问题发生原理与解决方法 1. 问题发生场景 在配置了Mybatis Plus分页查询后&#xff0c;自定义拦截器&#xff08;插件&#xff09;失效。 SpringBootApplication public class MybatisPlusDemoApplication {public static vo…

Python实现PDF到HTML的转换

PDF文件是共享和分发文档的常用选择&#xff0c;但提取和再利用PDF文件中的内容可能会非常麻烦。而利用Python将PDF文件转换为HTML是解决此问题的理想方案之一&#xff0c;这样做可以增强文档可访问性&#xff0c;使文档可搜索&#xff0c;同时增强文档在不同场景中的实用性。此…

MQ面试题整理(持续更新)

1. MQ的优缺点 优点&#xff1a;解耦&#xff0c;异步&#xff0c;削峰 缺点&#xff1a; 系统可用性降低 系统引入的外部依赖越多&#xff0c;越容易挂掉。万一 MQ 挂了&#xff0c;MQ 一挂&#xff0c;整套系统崩 溃&#xff0c;你不就完了&#xff1f;系统复杂度提高 硬生…

微服务入门篇:Nacos注册中心(Nacos安装,快速入门,多级存储,负载均衡,环境隔离,配置管理,热更新,集群搭建,nginx反向代理)

目录 1.Nacos安装1.官网下载2.解压到本地3.启动nacos 2.Nacos快速入门1.在父工程中导入nacos依赖2.给子项目添加客户端依赖3.修改对应服务的配置文件4.启动服务&#xff0c;查看nacos发现情况 3.Nacos服务多级存储模型4.NacosRule负载均衡5. 服务实例的权重设置6.环境隔离&…

Pytest 与allure测试报告集成

通过Feature, story, step 记录测试的功能&#xff0c;场景及测试步骤 # login.pylogin_func函数 传入参数是name 和 password 当输入的name和password与数据库db_data中数据一致时&#xff0c;返回“XXX成功登录系统&#xff01;” 当输入的name存在于数据库db_data但密码不正…

在bash或脚本中,如何并行执行命令或任务(命令行、parallel、make)

最近要批量解压归档文件和压缩包&#xff0c;所以就想能不能并行执行这些工作。因为tar自身不支持并行解压&#xff0c;但是像make却可以支持生成一些文件&#xff0c;所以我才有了这种想法。 方法有两种&#xff0c;第一种不用安装任何软件或工具&#xff0c;直接bash或其他 …

源码梳理(3)MybatisPlus启动流程

文章目录 1&#xff0c;MybatisPlus的使用示例2&#xff0c;BaseMapper方法的执行2,1 MybatisMapperProxy代理对象2.2 InvocationHandler接口&#xff08;JDK动态代理&#xff09;2.3 MapperMethodInvoker接口2.4 MybatisMapperMethod 3&#xff0c;SqlSession的执行流程3.1 Sq…

sqli-labs-master靶场训练笔记(21-38|精英级)

2024.1.30 level-21 (cookie 注入数据加密) 从页面上就可以看出这次的数据被 baes64 加密了 中国有句古话&#xff1a;师夷长技以制夷 &#xff0c;用base64加密后的数据即可爆出数据 加密前&#xff1a; admin and updatexml(1,concat(~,(select database()),~),1) and …

MFC结构体写入文件和读取

先定义一个结构体&#xff1b; struct myTxc { char c; CString name; int value; } txc; 读和写的菜单代码&#xff1b; void CjgtrwView::On32771() {// TODO: 在此添加命令处理程序代码CFile file(_T("test1.txt"), CFile::modeCreate | CFile::mod…

大卫·芬奇《消失的她》电影解读

《消失的爱人》&#xff08;Gone Girl&#xff09;是一部由大卫芬奇&#xff08;David Fincher&#xff09;执导的心理悬疑电影&#xff0c;改编自吉莉恩弗林&#xff08;Gillian Flynn&#xff09;的同名小说。这部影片于2014年上映&#xff0c;通过其精巧的剧本、紧张的氛围以…

在 iOS 上安装自定企业级应用

了解如何安装您的组织创建的自定应用并为其建立信任。 本文适用于学校、企业或其他组织的系统管理员。 您的组织可以使用 Apple Developer Enterprise Program 创建和分发企业专用的 iOS 应用&#xff0c;以供内部使用。您必须先针对这些应用建立信任后&#xff0c;才能将其打…

地理坐标系、空间坐标系、epsg查询网站

坐标系可用范围和详细信息的查询网站 简介 epsg.ruiduobao.com是一个可以查询gdal中所有坐标系信息的网站&#xff0c;可查询到坐标系的基准面、椭球体、中央子午线等相关信息&#xff0c;并对每个坐标系的可用范围在地图中进行了显示。详细信息可以看操作视频&#xff1a; e…

Postgresql体系结构

client连接PostgreSQL过程&#xff1a; 1、客户端发起请求 2、主服务postmaster进程负责服务器是否接受客户端的host通信认证&#xff0c;服务器对客户端进行身份鉴别 3、主服务进程为该客户端单独fork一个客户端工作进程postgres 4、客户端与postgres进程建立通信连接&#xf…

1-3 动手学深度学习v2-线性回归的从零开始实现-笔记

手动创建训练数据集 根据带有噪声的线性模型构造一个人造数据集。我们使用线性模型参数 w [ 2 , − 3.4 ] T \pmb{w} [2,-3.4]^{T} w[2,−3.4]T、 b 4.2 b 4.2 b4.2和噪声项 ϵ \epsilon ϵ生成数据集及其标签&#xff1a; y X w b ϵ \pmb{y} \pmb{Xw}b\epsilon yXw…

SpringMVC实现对网页的访问,在请求控制器中创建处理请求的方法

目录 测试HelloWorld RequestMapping注解 RequestMapping注解的位置 RequestMapping注解的value属性 RequestMapping注解的method属性 SpringMVC支持路径中的占位符&#xff08;重点&#xff09; SpringMVC获取请求参数 1、通过ServletAPI获取 2、通过控制器方法的形参…

Unity3D实现坦克大战

一、效果图演示 二、逻辑剖析 从界面上&#xff1a; 需要一个Canvas满屏对着用户&#xff0c;该Canvas上展示用户的游戏数据&#xff0c;比如血条。需要一个Canvas放在蓝色坦克上方&#xff0c;也需要实时对着用户&#xff0c;显示敌人的血条信息两个坦克一个平面Plane放草地…

C++并发编程 -2.线程间共享数据

本章就以在C中进行安全的数据共享为主题。避免上述及其他潜在问题的发生的同时&#xff0c;将共享数据的优势发挥到最大。 一. 锁分类和使用 按照用途分为互斥、递归、读写、自旋、条件变量。本章节着重介绍前四种&#xff0c;条件变量后续章节单独介绍。 由于锁无法进行拷贝…

三层交换组网实验(华为)

思科设备参考&#xff1a;三层交换组网实验&#xff08;思科&#xff09; 一&#xff0c;技术简介 三层交换技术的出现&#xff0c;解决子网必须依赖路由器进行管理的问题&#xff0c;解决传统路由器低速、复杂所造成的网络瓶颈问题。一个具有三层交换功能的设备可简单理解为…

蓝桥杯每日一题-----数位dp练习

题目 链接 参考代码 写了两个&#xff0c;一个是很久以前写的&#xff0c;一个是最近刚写的&#xff0c;很久以前写的时候还不会数位dp所以写了比较详细的注释&#xff0c;这两个代码主要是设置了不同的记忆数组&#xff0c;通过这两个代码可以理解记忆数组设置的灵活性。 im…

npm ERR! code CERT_HAS_EXPIRED

执行npm i报错&#xff1a; npm ERR! code ETIMEDOUT npm ERR! syscall connect npm ERR! errno ETIMEDOUT npm ERR! network request to https://registry.npmjs.org/react-redux failed, reason: connect ETIMEDOUT 104.16.2.35:443 npm ERR! network This is a problem rel…