使用 Thymeleaf 从 Spring 模型设置 JavaScript 变量

Posted 2023-02-26

【中文标题】使用 Thymeleaf 从 Spring 模型设置 JavaScript 变量

【英文标题】：Setting up a JavaScript variable from Spring model by using Thymeleaf

【发布时间】：2014-10-30 12:31:09

【问题描述】：

我使用 Thymeleaf 作为模板引擎。如何将变量从 Spring 模型传递给 javascript 变量？

弹簧侧：

@RequestMapping(value = "message", method = RequestMethod.GET)
public String messages(Model model) 
    model.addAttribute("message", "hello");
    return "index";

客户端：

<script>
    ....
    var m = $message; // not working
    alert(m);
    ...
</script>

【参考方案1】：

据官方documentation：

<script th:inline="javascript">
/*<![CDATA[*/

    var message = /*[[$message]]*/ 'default';
    console.log(message);

/*]]>*/
</script>

【讨论】：

不起作用... javascript error 未捕获的语法错误

工作正常，也可以从messages.properties中读取：var msg = [[#msg]];

@szxnyc 如果你忘记了/*<![CDATA[*/ 宏，你会得到它。

另请关注<script th:inline="javascript">

@MichałStochmal 您可以在外部 javascript 之上加载内联 javascript，并在外部 javascript 中使用相同的变量（在内联 javascript 中定义）。

【参考方案2】：

Thymeleaf 3 现在：

显示一个常量：

显示一个变量：

var message = [[$message]];

或者在您以静态方式打开模板文件（不在服务器上执行）时，在注释中获得有效的 JavaScript 代码。

Thymeleaf 称之为：JavaScript 自然模板

var message = /*[[$message]]*/ "";

Thymeleaf 将忽略我们在评论之后和分号之前写的所有内容。

更多信息：http://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#javascript-inlining

【讨论】：

谢谢！想给你一杯啤酒我正在寻找这种语法 var MY_URL = /*[[$T(com.xyz.constants.Fruits).cheery]]*/ "";

【参考方案3】：

var message =/*[[$message]]*/ 'defaultanyvalue';

【讨论】：

注意 /* */ 和包含的 [[ ]] 之间应该没有空格。

值得注意的是，defaultanyvalue 只会在静态运行页面时使用，即在 Web 容器之外。如果在容器内运行并且变量 message 尚未声明，则生成的源代码将为 var message = null;

将th:inline="javascript" 添加到脚本标签也很重要。

【参考方案4】：

根据to the documentation，有几种方法可以进行内联。 正确的方式你必须根据情况选择。

1) 简单地将变量从服务器放到 javascript 中：

<script th:inline="javascript">
/*<![CDATA[*/

var message = [[$message]];
alert(message);

/*]]>*/
</script>

2) 将 javascript 变量与服务器端变量相结合，例如您需要在 javascript 中创建请求链接：

<script th:inline="javascript">
        /*<![CDATA[*/
        function sampleGetByJquery(v) 
            /*[+
            var url = [[@/my/get/url(var1=$#httpServletRequest.getParameter('var1'))]] 
                      + "&var2="+v;
             +]*/
            $("#myPanel").load(url, function() );
        
        /*]]>*/
        </script>

我无法解决的一种情况 - 然后我需要在模板内调用的 Java 方法中传递 javascript 变量（我猜这是不可能的）。

【参考方案5】：

确保您的页面上已有 thymleaf

//Use this in java
@Controller
@RequestMapping("/showingTymleafTextInJavaScript")
public String thankYou(Model model)
 model.addAttribute("showTextFromJavaController","dummy text");
 return "showingTymleafTextInJavaScript";



//thymleaf page  javascript page
<script>
var showtext = "[[$showTextFromJavaController]]";
console.log(showtext);
</script>

【参考方案6】：

我在野外见过这种事情：

<input type="button"  th:onclick="'javascript:getContactId(\'' + $contact.id + '\');'" />

【参考方案7】：

如果你使用 Thymeleaf 3：

<script th:inline="javascript">
    var username = [[$session.user.name]];
</script>

【讨论】：

这应该得到更多的选票，现在 Thymeleaf 3 几乎是常态，是吗？手动链接也应该更新。 thymeleaf.org/doc/tutorials/3.0/… ...我第一次将带有音频数据的 float[] 发送到网页。可以使用 Web Audio API 播放它！这个问题和这些答案对定位使用的 Javascript 内联有很大帮助。

【参考方案8】：

另一种方法是创建一个由 java 控制器返回的动态 javascript，就像在 thymeleaf 论坛中写的那样：http://forum.thymeleaf.org/Can-I-use-th-inline-for-a-separate-javascript-file-td4025766.html

解决此问题的一种方法是创建一个动态 javascript 文件，其中包含 嵌入其中的 URL。以下是步骤（如果您使用的是 Spring MVC）

@RequestMapping(path = "/dynamic.js", method = RequestMethod.GET, produces = "application/javascript")
@ResponseStatus(value = HttpStatus.OK)
@ResponseBody
public String dynamicJS(HttpServletRequest request) 

        return "Your javascript code....";




  

【参考方案9】：

如果您需要不转义显示变量，请使用以下格式：

<script th:inline="javascript">
/*<![CDATA[*/

    var message = /*[($message)]*/ 'default';

/*]]>*/
</script>

注意包裹变量的[(括号。