如何在Thymeleaf的th:href中生成正确的JavaScript URL？

问题场景 #

原有静态HTML代码通过多个<a>标签调用JavaScript函数：

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <a class="dropdown-item" href="javascript:getSearch('Deelnemer', 'asMemberSearch')">Zoekscherm deelnemers</a>
    <a class="dropdown-item" href="javascript:getSearch('Reglement', 'asPlanSearch')">Zoekscherm reglementen</a>
    ...
</div>

尝试用Thymeleaf的th:each循环${anchorList}实现通用化时，使用th:href="@{/javascript:getSearch(anchor.object, anchor.search)}"生成的结果是javascript:getSearch?anchor.object&anchor.search，不符合期望的javascript:getSearch('Deelnemer','asMemberSearch')格式。

解决方案 #

Thymeleaf的@{...}语法用于处理标准URL，会自动将参数转换为查询字符串格式，不适合生成JavaScript伪协议的链接。直接使用字符串插值来拼接JavaScript代码即可：

<div class="dropdown-menu" aria-labelledby="navbarDropdown">
  <a th:each="anchor : ${anchorList}" 
     th:text="${anchor.title}" 
     th:href="|javascript:getSearch('${anchor.object}', '${anchor.search}')|"
     class="dropdown-item"
     href="javascript:getSearch('Deelnemer', 'asMemberSearch')">dummy</a>
</div>

说明 #

• 使用Thymeleaf的**管道符|...|**进行字符串拼接，直接将anchor.object和anchor.search的值插入到JavaScript函数调用中，并添加单引号，生成符合要求的格式。
• 保留原有的href属性作为静态 fallback，确保在Thymeleaf未渲染时页面仍有基础功能。

内容的提问来源于stack exchange，提问作者eddy