使用 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>
205988 次浏览
小开
最佳答案

根据 译自: 美国《科学》杂志网站(http://www.thymeleaf.org/doc/Tutorials/2.1/usingthymeleaf.html # script-inlining-javascript-and-dart)的官方数据:

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


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


/*]]>*/
</script>
小开 
var message =/*[[${message}]]*/ 'defaultanyvalue';
小开

根据 文件，有几种方法可以实现内联。
你必须根据情况选择正确的方法。

1)简单地把变量从 server 放到 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} + '\');'" />
小开

假设请求属性名为“ message”:

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

使用 Thymeleaf 模板在 html 页面中阅读:

<script>
var message = "[[${message}]]";
alert(message);
</script>
小开

百里香叶3现在:

  • 显示一个常量:

    <script th:inline="javascript">
var MY_URL = /*[[${T(com.xyz.constants.Fruits).cheery}]]*/ "";
</script>

  • Display a variable:

    var message = [[${message}]];

  • Or in a comment to have a valid JavaScript code when you open your template file in a static manner (without executing it at a server).

    Thymeleaf calls this: JavaScript natural templates

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

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

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

小开

确保你已经在页面上有胸腺叶

//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>
小开

如果需要显示未转义的变量，请使用以下格式:

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


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


/*]]>*/
</script>

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

小开

如果你使用 Thymeleaf 3:

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

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

处理这个问题的一种方法是使用 这里是步骤(如果你使用的是 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....";


}

提交答案