Thymeleaf教程：通过点击按钮将表格行数据传递到新页面

本教程详细介绍了如何利用Thymeleaf的标准URL语法，在HTML表格中通过点击“申请”按钮，将当前行特定数据（如课程编号）作为URL参数，安全有效地传递到目标页面。文章提供了具体的代码示例，帮助开发者实现从列表页到详情页或操作页的数据传递，确保用户体验流畅且数据准确。

在web应用开发中，尤其是在展示数据列表的场景下，一个常见的需求是当用户点击表格中的某个操作按钮时，需要将该行对应的特定数据传递到另一个页面进行进一步处理（例如，查看详情、编辑或申请）。本文将以一个课程列表为例，详细讲解如何使用thymeleaf模板引擎实现这一功能，确保数据在页面跳转时能够准确无误地传递。

1. 问题背景

假设我们有一个展示课程信息的HTML表格，每一行代表一门课程，并且每行末尾都有一个“Apply”（申请）按钮。当用户点击某行课程的“Apply”按钮时，我们希望将该课程的唯一标识（例如classNo）传递到applycourse.html页面，以便在该页面加载对应课程的申请表单。

原始的course.html中，“Apply”按钮的代码可能如下所示，它只是一个静态链接，无法传递当前行的数据：

<table id="coursetable" class="coursetable">
    <thead>
        <tr>
            <th>Status</th>
            <th>Course Code</th>
            <th>Course No</th>
            <th>Course Name</th>
            <th>Course Date (Time)</th>
            <th>Apply</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="class : ${inclass}" th:data-row="${class}">
            <td th:text="${class.classStatus}"></td>
            <td th:text="${class.courseId.courseCode}" th:style="${class.courseId.courseCode}"></td>
            <td th:text="${class.classNo}"></td>
            <td th:text="${class.courseId.courseTitleEng}"></td>
            <td th:text="${class.classDate}"></td>
            <td><a href="../CourseRegistration-NotesForOnlineApplication/individual/individualapplication" class="spinner-trigger-button">Apply</a></td>
        </tr>
    </tbody>
</table>

2. 解决方案：利用Thymeleaf标准URL语法传递参数

Thymeleaf提供了一套强大的标准URL语法（Standard URL Syntax），允许开发者在URL中方便地嵌入变量。通过th:href属性和@{...}语法，我们可以将动态数据作为查询参数附加到URL上。

核心思想： 在<a>标签的th:href属性中，使用@{/path/to/page(paramName=${variable})}的格式来构造URL。其中：

• /path/to/page是目标页面的URL路径。
• paramName是您希望在目标页面接收的参数名称。
• ${variable}是当前Thymeleaf上下文中可用的变量，它将作为paramName的值。

修改后的course.html代码示例：

为了将当前行的classNo传递到individualapplication页面，我们需要修改“Apply”按钮的<a>标签如下：

<table id="coursetable" class="coursetable">
    <thead>
        <tr>
            <th>Status</th>
            <th>Course Code</th>
            <th>Course No</th>
            <th>Course Name</th>
            <th>Course Date (Time)</th>
            <th>Apply</th>
        </tr>
    </thead>
    <tbody>
        <tr th:each="class : ${inclass}" th:data-row="${class}">
            <td th:text="${class.classStatus}"></td>
            <td th:text="${class.courseId.courseCode}" th:style="${class.courseId.courseCode}"></td>
            <td th:text="${class.classNo}"></td>
            <td th:text="${class.courseId.courseTitleEng}"></td>
            <td th:text="${class.classDate}"></td>
            <td>
                <!-- 修改后的代码：使用th:href传递classNo参数 -->
                <a th:href="@{../CourseRegistration-NotesForOnlineApplication/individual/individualapplication(classNo=${class.classNo})}" 
                   class="spinner-trigger-button">Apply</a>
            </td>
        </tr>
    </tbody>
</table>

生成的URL示例：

当Thymeleaf处理上述代码时，对于每一行数据，它会根据class.classNo的实际值生成一个动态的URL。例如，如果某行的class.classNo值为500，那么生成的链接将是：

<a href="../CourseRegistration-NotesForOnlineApplication/individual/individualapplication?classNo=500" class="spinner-trigger-button">Apply</a>

当用户点击此链接时，classNo=500这个查询参数就会被发送到目标页面。

3. 目标页面数据接收

在目标页面（例如applycourse.html对应的后端控制器）中，您可以通过标准的Web请求参数获取方法来接收这些数据。对于Spring MVC应用，这通常意味着在控制器方法中使用@RequestParam注解来绑定URL中的参数。

Spring MVC控制器示例：

@Controller
@RequestMapping("/CourseRegistration-NotesForOnlineApplication/individual")
public class IndividualApplicationController {

    @GetMapping("/individualapplication")
    public String showApplicationForm(@RequestParam("classNo") String classNo, Model model) {
        // 根据接收到的classNo查询对应的课程详情
        // Course course = courseService.findByClassNo(classNo);
        // model.addAttribute("course", course);
        model.addAttribute("receivedClassNo", classNo); // 将参数添加到模型中，以便在applycourse.html中使用
        return "applycourse"; // 返回applycourse.html模板
    }
}

在applycourse.html中，您就可以通过${receivedClassNo}来访问传递过来的课程编号了。

4. 注意事项

• 数据安全性与隐私： 尽管URL参数方便，但不应传递敏感或大量数据。对于敏感信息，考虑使用POST请求或将会话（Session）存储作为替代方案。URL参数是可见的，可能会被书签收藏或记录在浏览器历史中。
• 多参数传递： 如果需要传递多个参数，只需在th:href的@{...}中用逗号分隔。例如：

  <a th:href="@{/path(param1=${value1}, param2=${value2}, param3=${value3})}" ...>Link</a>

• URL编码： Thymeleaf会自动处理URL参数的编码，无需手动进行特殊字符的处理，这大大简化了开发。
• 路径上下文： @{...}语法支持多种URL类型，包括相对路径、绝对路径和上下文相对路径。在本例中，../表示相对路径，根据当前页面的URL来计算。

5. 总结

通过灵活运用Thymeleaf的标准URL语法，我们可以轻松实现从表格行到目标页面的数据传递。这种方法不仅代码简洁、易于维护，而且能够有效地提升用户体验，确保Web应用的交互性和数据准确性。理解并掌握th:href和@{...}的用法是Thymeleaf开发中的一项基本且重要的技能。