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

我使用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>

....
var m=${message}；//不起作用
警报（m）；
...

据官方消息称：

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

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

/*]]>*/
</script>

/**/

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

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

我见过这种事情在野外工作：

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

Thymeleaf 3现在：

• 显示一个常数：
  <script th:inline="javascript"> var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}]]*/ ""; </script> var MY_URL=/*[${T（com.xyz.constants.Fruits）.cheery}]*/'；
• 显示一个变量：
  var message = [[${message}]]; var message=[[${message}]]；
• 或者，当您以静态方式（不在服务器上执行）打开模板文件时，在注释中使用有效的JavaScript代码
  Thymeleaf称之为：JavaScript自然模板
  var message = /*[[${message}]]*/ ""; var message=/*[[${message}]*/'； Thymeleaf将忽略我们在注释之后和分号之前所写的所有内容

---

更多信息：

请确保您已经在页面上显示了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>

//在java中使用它
@控制器
@请求映射（“/showingTymleafTextInJavaScript”）
公共字符串谢谢（模型）{
addAttribute（“showTextFromJavaController”，“伪文本”）；
返回“showingTymleafTextInJavaScript”；
}
//页面javascript页面
var showtext=“[${showTextFromJavaController}]]”；
console.log（showtext）；

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

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

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

/*]]>*/
</script>

/**/

---

注意包装变量的

[（

括号。

如果使用Thymeleaf 3：

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

var username=[${session.user.name}]]；

另一种方法是创建一个由java控制器返回的动态javascript，就像在thymeleaf论坛中写的那样：

处理此问题的一种方法是使用 以下是步骤（如果您使用的是SpringMVC）

---

不工作…javascript错误未捕获语法错误工作正常，也可以从消息中读取。属性：var msg=[[[#{msg}]]；@szxnyc如果您忘记了

/*宏，您将得到它。另外请注意
@MichałStochmal您可以在外部javascript之上加载内联javascript并使用相同的变量（在内联javascript中定义）在外部javascript中。请注意，/**/和包含的[]之间不应存在空格。值得注意的是，
defaultanyvalue
仅在静态运行页面时使用，即在web容器外部。如果在容器内部运行，且未声明变量
message
，则生成的源代码将为
var message=null；
添加
th:inline=“javascript”也很重要
到脚本标签。谢谢！想给你一杯啤酒吗？我正在寻找这个语法var MY_URL=/*[${T（com.xyz.constants.Fruits）.cheery}]*/'；这应该会得到更多的投票，现在Thymeleaf 3几乎是标准的，是吗？手动链接也应该更新了……我刚刚发布了一个float[]首次将音频数据传输到网页。可以使用web音频API播放它！这个问题和这些答案对定位所使用的Javascript内联有很大帮助。
<script th:inline="javascript">
    var username = [[${session.user.name}]];
</script>

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

        return "Your javascript code....";

}