带引号的Thymeleaf内联javascript不起作用

Posted 2023-02-26

【中文标题】带引号的Thymeleaf内联javascript不起作用

【英文标题】：Thymeleaf inline javascript with quotation mark not working

【发布时间】：2020-08-21 03:37:39

【问题描述】：

我有一个使用 Thymeleaf 的 Spring Boot 应用程序。我正在使用字符串值设置模型变量，并希望将其用作 javascript 中的变量值。

在 Java 中我会做类似的事情：

StringBuffer data = new StringBuffer();
data.append("[ [\"").append(name1).append("\" ], \"").append(name2).append("\"] ] ");
...
model.addAttribute("dataString", data);

我的 html 代码如下：

<script th:inline="javascript">
  /*<![CDATA[*/
  var dataSet = [[$dataString]];
  /*]]>*/
...
</script>

JavaScript 中的结果应该是：

var dataSet = [ ["Name1"], ["Name2"] ];

但我得到的是 HTML：

var dataSet = "[ [\"Name1\"], [\"Name2\"] ]";

我在 HTML/JavaScript 中尝试了不同的东西：

只使用一个括号[$dataString] -> 得到var dataSet = [$dataString];； 使用这个：/*[$dataString]*/ -> 得到var dataSet = /*[$dataString]*/;； 或：/*[[$dataString]]*/ -> 结果为 var dataSet = "[ [\"Name1\"], [\"Name2\"] ]"; 删除CDATA的东西->没有改变

在 JavaScript 中没有任何结果会产生正确的字符串。 如何获得正确的字符串？

【问题讨论】：

欢迎来到 Stack Overflow！请拨打tour（您将获得徽章！）

【参考方案1】：

您不应该将 JSON 字符串从您的控制器传递到您的模型。相反，您应该传递常规 Java 对象并让 Thymeleaf 为您进行编码。例如，如果您想要一个如下所示的数据集：

[ ["Name1"], ["Name2"] ]

然后你应该像这样将它添加到你的模型中：

// This is an array of arrays, just like [ ["Name1"], ["Name2"] ]
String[][] dataset = "Name1", "Name2";
model.addAttribute("dataString", dataset);

然后输出

<script th:inline="javascript">
  /*<![CDATA[*/
  var dataSet = [[$dataString]];
  /*]]>*/
</script>

将产生 JavaScript：

var dataSet = [ ["Name1"], ["Name2"] ];

如您所愿，无需手动创建字符串。这当然适用于各种 Java 对象，甚至会自动将 getter 和 setter 转换为常规 JavaScript 对象。

当然，如果你真的只是想直接从你的模型中添加 JSON 字符串，你当然可以使用未转义的内联。

var dataSet = [($dataString)];

但这确实与这些东西的工作原理背道而驰。

【讨论】：

使用String[][] dataset = "Name1", "Name2"; 显然优于我的答案。它还促使我阅读documentation，并重新思考我自己的一些代码。