jQuery结合Thymeleaf模板中的fragment标签实现Ajax异步加载数据
2021/5/10 18:55:25
本文主要是介绍jQuery结合Thymeleaf模板中的fragment标签实现Ajax异步加载数据,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前端页面
一、首先、在需要异步刷新的div上面定义fragment片段
1 <div th:fragment="fragmentSegment"> 2 需要异步刷新的div 3 </div>
二、主动加载数据
1 <script type="text/javascript" th:inline="javascript"> 2 // 异步刷新 3 $(function () { 4 $("#comment-container").load(/*[[@{/服务器的请求地址}]]*/""); 5 }); 6 7 </script>
三、被动加载——写成一个函数
1 <script type="text/javascript" th:inline="javascript"> 2 function postData() { 3 $("#fragmentSegment").load(/*[[@{/服务器请求地址}]]*/"", { 4 // 可携带参数 5 }, function (responseTxt, statusTxt, xhr) { 6 // 回调函数 7 }); 8 } 9 </script>
后台
Controller层
1 @Controller 2 public class getDataController { 3 4 @PostMapping("/请求url") 5 public String getData() { 6 return "路径/页面名称 :: 当前页面的fragment片段名称"; 7 } 8 }
这篇关于jQuery结合Thymeleaf模板中的fragment标签实现Ajax异步加载数据的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-03-06jquery对css样式(jquery中的css方法)-icode9专业技术文章分享
- 2023-05-27JQuery的认识和安装
- 2023-01-06JQuery应用技巧:如何定义 HTML 模板并使用 JQuery 进行加载-icode9专业技术文章分享
- 2022-09-29复习-jQuery
- 2022-09-04Python3项目初始化10-->前端基础jquery、ajax,sweetalert--更新用户改造
- 2022-08-30day 27 jquery
- 2022-08-29jQuery筛选器,bootstrap
- 2022-08-20JQuery事件绑定
- 2022-08-20JQuery案例
- 2022-08-07关于jQuery的学习