【Springboot】 thymeleaf模板应用 及 ajax请求问题

最新推荐文章于 2024-06-14 11:03:17 发布
最新推荐文章于 2024-06-14 11:03:17 发布
阅读量1.1w 收藏 29
点赞数 3
分类专栏： springboot 文章标签： springboot themleaf ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40587085/article/details/85225725
版权

一：为啥springboot不推荐使用jsp

我的理解是，现在开发的时候都是前后端分离，如果用jsp，前端的同志们看不到运行结果啊，也不知道自己的代码自己敲的对不对，旁边的大佬就是前端的，用的vscode，写的全是html页面，本地启动一个服务，分分钟看到效果，这玩意能带来成就感啊。当然了，最重要的事springboot不推荐用jsp。

二：使用themleaf时的项目结构

 static下面放imgs啊，lib等等，html页面全在templates里。

三：使用themleaf时遇到的页面传值问题

             ajax用的那是非常多啊，还遇到了一个提交表单的，以前用springmvc的时候直接一个action就行了，结果在themleaf的html中玩不转啊，各种参数搞的脑壳疼，记录一下以便以后查阅。

(1).用ajax传不是对象的值

         前台：data里面就是要传的值，用jquery获取或script里面自定义方法里的或者变量里的无所谓，

 $.ajax({
                url: "/savePlace",
                data:{"sLng":sLng,"sLat":sLat,"sId&
最低0.47元/天 解锁文章
doctorcs-w
关注
  • 3
    点赞
  • 踩
  • 29
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Sptingboot：thymeleaf中使用Ajax
x_June的博客
04-14 1332
@ Sptingboot：thymeleaf中使用Ajax 不了解thymeleaf的可以参考 : 这是一个链接 1.在pom.xml导入thymeleaf需要的jar包 在pom.xml里面添加以下代码 <!--th标签需要的架包--> <dependency> <groupId>org.springframework....
Springboot集成html页面，thymeleaf模板渲染，AJAX调用后端接口
热门推荐
小敷的博客
06-17 1万+
后端框架搭建我用的是Springboot+Mybatis，地址：https://blog.csdn.net/k15014428090/article/details/89002900 先贴上pom文件依赖： json依赖是为了后面把json字符串转为自定义对象用的 <!-- json--> <dependency> <groupId>com...
Springboot+mybatis用Ajax+thymeleaf实现前端操作用户信息表并分页显示相关数据的功能
weixin_48741598的博客
11-27 2085
pagehelper: helperDialect: mysql reasonable: true supportMethodsArguments: true params: count=countSql Ajax利用javascript代替传统的表单提交方式，和服务器进行少量数据交 换。可以将响应信息利用javascript进行网页数据的部分更新。
themleaf 页面弹层取值
最新发布
csdn565973850的博客
06-14 424
主要讲述基于若依框架的themleaf页面弹层列表，取值，传值，保存等操作
【SpringBoot】SpringBoot+Thymeleaf+Ajax制作一个动态的课程表
HR的博客
07-23 1577
目录数据库前端代码Ajax代码后端代码结果 数据库 我们的数据库有俩个表，一个是存储课程的基本信息一个是存储上课地点的信息 这个表的列分别是：课程id、课程名称、教授老师名称、上课班级 这个表的列分别是：课程id、上课的星期天数、上课的节次、上课地点 前端代码 前端就是做一个大体的框架，然后将数据填入 css代码 <style> table.tftable, table.table-count { font-size: 12px; color: #333333;
ajax数据写入thymeleaf,ajax+springboot+thymeleaf的使用
weixin_29442031的博客
08-05 1318
最近的一个项目中 涉及到了一个功能 是关于地图的数据联动所以就需要用 ajax 来异步更新数据.之前搭了一个 springboot 的项目.所以就用在这个项目上进行了一次尝试.记录一下整个的过程 ,希望会对刚学习 ajax 的同学有所帮助.设计思路:前台的 div 中有一个数字 在前台获取到这个 id 然后传到后台后台获取到 id 为这个值得对象.再将这个对象在前台展示出来.出现的问题和解决办法....
thymeleaf和ajax的讲解以及代码应用
weixin_69774975的博客
08-22 2206
今天带给大家的是thymeleaf和ajax的基础应用。
SpringMVC学习总结（七）@RequestBody/RequestEntity/@ResponseBody/SpringMVC处理Json和Ajax/ResponseEntity/文件上传和下载
ZaynFox的博客
09-06 1205
HttpMessageConverter，报文信息转换器，将请求报文转换为Java对象，或将Java对象转换为响应报文 HttpMessageConverter提供了两个注解和两个类型：@RequestBody，@ResponseBody，RequestEntity，ResponseEntity 一、获取请求信息 （一）@RequestBody @RequestBody可以获取请求体，需要在控制器方法设置一个形参，使用@RequestBody进行标识，当前请求的请求体就会为当前注解所标识的形参赋值。 案例：
SpringBoot使用Ajax实现登录
12-02
在Thymeleaf模板文件（如`login.html`）中，我们可以使用JavaScript和jQuery库来编写Ajax请求。例如： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <title>Login Page ...
springboot整合thymeleaf实现滑块功能完整源码
04-27
// 这里可以添加与后端交互的逻辑，如发送Ajax请求 }); }); 滑块验证示例 ``` 为了将这个HTML页面映射到SpringBoot的控制器，我们需要创建一个对应的Java控制器。在`src/main/java/...
Object_SpringBoot-Ajax_CRUD.rar
07-23
- `src/main/webapp`/`templates`：Thymeleaf或其他模板引擎的视图文件，用于渲染前端页面。 这个项目实例是学习和理解前后端分离、SpringBoot集成MyBatis、Lombok简化代码、以及Ajax与JSON交互的理想实践。开发者...
SpringBoot+Thymeleaf+SSM+Vue.js实现简单的增删改查
01-27
在本项目中，我们主要利用SpringBoot框架与Thymeleaf模板引擎，结合传统的SSM（Spring、SpringMVC、MyBatis）架构以及前端Vue.js技术，来实现一个基本的增删改查功能。这是一个典型的后端服务与前端交互的示例，适合...
基于SpringBoot及thymeleaf搭建的疫情信息管理系统
12-08
接着，进入控制器（Controller）层，定义HTTP请求的处理器，接收前端发送的请求，调用服务层的方法，处理数据，并将结果返回给Thymeleaf模板。例如： ```java @GetMapping("/coronavirus") public String ...
SpringBoot集成thymeleaf，利用ajax进行前后台异步交互
qq_34955564的博客
11-22 4552
#关于SpringBoot集成thymeleaf 通过ajax访问SpringBoot后台，返回json数据给页面。 方法注解@RequestMapping是返回到指定页面，例如： @RequestMapping("/initPage") public String initPage(){ return "index"; } 是跳转到index.html页面。 ...
AJAX、thymeleaf在springboot中的实战应用
m0_57816620的博客
01-31 721
springboot ajax thymeleaf 的综合使用项目实战篇
thymeleaf动态渲染table
m0_37615458的博客
08-08 1万+
情况：刚接触thymeleaf模版，网上找了一些文章，也没有对jQuery.load(url,data)的参数加以说明，现在记录下，具体的请查看代码。 需求 ：动态无刷新的渲染表格内容，说白了就是前台html页面load(发请求，可以带参数)一个代码片段（table.html），代码片段中的业务js自己写就可以了。 注意： 1在控制类中给代码片段table.htm...
ajax请求后，使用thymeleaf渲染成功，页面不显示
weixin_43290126的博客
01-01 1619
ajax请求后，使用thymeleaf渲染成功，页面不显示 这个bug我找了很久，之前是怀疑，thymeleaf解析错误，但是返回时，页面的元素存在，但是页面不显示。 1、ajax请求操作 $(document).ready(function(){ var leader_top = $("#leader_top"); $.ajax({ url: "/association/leaderResource", type: "get", success: f
thymeleaf ajax 渲染,JavaScript - thymeleaf 在 js 中渲染的一个问题
weixin_42355570的博客
08-05 722
可能只是一个小小的问题。。。虽然解决了。但真的有点吐了。嘛，可能标题取叫 「spring boot ajax 发送 post 方法报 500 状态码，put 方法报405 状态码错误」 更能让遇到相同问题的伙伴很快找到解决办法。这个问题是我在用 java + springboot + thymeleaf + jquery 写网站时遇到的。先说说的要做的事：在前一个页面点击新建按钮会来到编辑页面，如...
thymeleaf ajax 渲染,Springboot集成html页面，thymeleaf模板渲染，AJAX调用后端接口
05-26
Thymeleaf是一个流行的服务器端模板引擎，它可以将数据和模板相结合，生成HTML页面。而AJAX则是一种在不重新加载整个页面的情况下与服务器进行交互的技术。 在Spring Boot中集成Thymeleaf非常容易。首先，需要在pom.xml文件中添加Thymeleaf依赖项： ```xml <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> ``` 接下来，可以创建一个Controller类来处理请求并返回HTML页面。例如： ```java @Controller public class MyController { @GetMapping("/") public String home(Model model) { model.addAttribute("message", "Hello Thymeleaf!"); return "index"; } } ``` 这个Controller类处理根路径的GET请求，并将一个名为“message”的属性添加到模型中。然后，它返回名为“index”的模板。 在这个例子中，“index”模板可以使用Thymeleaf标记来渲染页面。例如： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> </head> <body> <h1 th:text="${message}">Hello World!</h1> </body> </html> ``` 这个模板使用Thymeleaf语法来渲染一个标题，标题的文本来自于“message”模型属性。 现在，假设需要使用AJAX来从后端调用接口并渲染页面。可以使用jQuery库来简化这个过程。例如： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>My Page</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script> $(document).ready(function() { $.ajax({ url: "/api/data", success: function(data) { $("h1").text(data.message); } }); }); </script> </head> <body> <h1>Hello World!</h1> </body> </html> ``` 这个模板包含了一个名为“api/data”的接口调用，当页面加载时会自动调用该接口。当接口调用成功后，页面上的标题将被替换为返回的数据。注意，这里使用了jQuery的“$.ajax”函数来执行异步请求。 最后，需要在Controller中添加一个处理接口调用的方法。例如： ```java @RestController public class MyRestController { @GetMapping("/api/data") public Map<String, String> getData() { Map<String, String> data = new HashMap<>(); data.put("message", "Hello AJAX!"); return data; } } ``` 这个RestController类处理“api/data”路径的GET请求，并返回一个包含名为“message”的属性的Map对象。这个属性将被用于渲染页面标题。 如果一切正常，现在可以启动应用程序并访问根路径。页面将加载并显示一个标题“Hello World!”，然后自动使用AJAX调用接口“/api/data”，并将标题替换为返回的数据“Hello AJAX!”。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值