首页thymeleaf异步加载表格数据

thymeleaf异步加载表格数据

时间: 2023-09-20 21:13:18 浏览: 354

Thymeleaf本身不支持异步加载数据，但可以结合其他技术实现异步加载表格数据。一种常见的方法是使用Ajax来发送异步请求，并将返回的数据动态更新到表格中。首先，在前端页面中引入jQuery或其他Ajax库。然后，使用JavaScript编写一个函数，该函数在页面加载完成后调用，通过Ajax请求获取数据，并将数据填充到表格中。下面是一个示例代码： ```html <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> </head> <body> <table id="data-table"> <thead> <tr> <th>Name</th> <th>Age</th> </tr> </thead> <tbody></tbody> </table> <script th:inline="javascript"> $(document).ready(function() { loadData(); }); function loadData() { $.ajax({ url: '/data-url', // 替换为实际的数据接口URL type: 'GET', dataType: 'json', success: function(data) { var tbody = $('#data-table tbody');

阅读全文