使用Thymelaf从Spring模型中设置JavaScript变量

Setting up a JavaScript variable from Spring model by using Thymeleaf

本文关键字：设置 JavaScript 变量 模型 Thymelaf Spring 使用      更新时间：2023-09-26

我使用Thymelaf作为模板引擎。如何将变量从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>

根据官方文档：

<script th:inline="javascript">
/*<![CDATA[*/
    var message = /*[[${message}]]*/ 'default';
    console.log(message);
/*]]>*/
</script>

Thymelaf 3现在：

  • 显示常数：

    <脚本th:inline＝"；javascript">var MY_URL＝/*[[${T（com.xyz.constants.Fruits）.cheley}]]*/〃"；<脚本>

  • 显示变量：

    var消息=[[$｛message｝]]；

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

    Thymelaf称之为：JavaScript自然模板

    var message=/*[[${message}]]*/"；

    Thymelaf将忽略我们在注释之后和分号之前所写的所有内容。

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

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

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

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变量（我想这是不可能的）。

确保页面上已经有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>

我见过这种东西在野外工作：

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

如果使用Thymelaf 3:

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

如果您需要显示未显示的变量，请使用以下格式：

<script th:inline="javascript">
/*<![CDATA[*/
    var message = /*[(${message})]*/ 'default';
/*]]>*/
</script>

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

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

处理此问题的一种方法是使用URL嵌入其中。以下是步骤（如果您使用的是SpringMVC）

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

假设请求属性名为"消息"：

request.setAttribute("message", "this is my message");

使用Thymelaf模板在html页面中阅读：

<script>
  var message = "[[${message}]]";
  alert(message);
</script>
相关文章：