在 JavaScript 中使用 Spring 变量答案

【问题标题】：Using Spring variable in javascript在 JavaScript 中使用 Spring 变量
【发布时间】：2018-02-06 14:24:03
【问题描述】：

我正在尝试在 javascript 中使用 Spring 变量：

Map<String, List<String>> states;

我找到了一些信息here

所以我尝试了：

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

在我的浏览器的源选项卡中，我有类似的内容：

var xxx = {STATE1=[a, b, c, d]};
console.log(xxx);

错误是：Uncaught SyntaxError: Invalid shorthand property initializer。

我还尝试了：var xxx = /*[[${states}]]*/ 'foo';，如果我打印console.log(xxx)，我得到'foo'。

【问题讨论】：

您是否尝试将 xxx 变量值用引号括起来以使其成为字符串？只是为了检查！
它正在与'' 一起工作，但问题是这样我没有对象（哈希图）而是字符串，所以我不能做类似xxx['STATE1'] 的事情
看起来你的地图以一种奇怪的方式被序列化了。根据docthymeleaf 应该正确地编写地图。你的类路径中有 Jackson 库吗？
我有。我以这种方式传递哈希图：Map<String, List<String>> states... model.addAttribute("states", states);@JakubCh.
@ImeshChandrasiri 对不起，我忘了在我的评论中标记你。

标签： javascript java spring spring-mvc

【解决方案1】：

这个错误是由于{STATE1=[a, b, c, d]} 是无效的Javascript 对象。

解释很简单：你看到的是服务器端渲染的产物（你正在使用 Thymeleaf，正如我可以通过th:inline 标签所建议的那样）。因此，在服务器上，您的地图对象将呈现为{STATE1=[a, b, c, d]} 字符串。在您的客户端（浏览器）上，您将获得带有此字符串的页面，仅此而已。已经没有任何 Java 对象。只是串。而且这个字符串是Javascript中对象的无效初始化。

所以你根本不能以这种方式使用地图。您无法使用 JSON.parse 解析它，因为它是无效的 JSON（应该使用 : 而不是 =）。

希望这会有所帮助！

附：如果您尝试在 Javascript 中将 = 替换为 :，它将以不同于您预期的方式工作：数组 [a, b, c, d] 将被视为名称为 a、b、@ 的变量数组987654332@ 和 d 所以你必须把它放在'' 中。但我建议扔掉这个想法，重新考虑你的方法。这不是它应该使用的方式。

【讨论】：

@NikNik 作为 Java 对象 - 当然可以。使用服务器端渲染，您将获得字符串表示。您可以进行肮脏的黑客攻击：使用 map 字段创建一个包装器对象并覆盖 toString 以便您可以在那里生成有效的 JSON。它应该可以工作，但是它太脏了，我不会用一根 60 英尺长的杆子碰它（南方公园的卡特曼 (c)）。你应该把它写在响应正文中（在服务器上）并用 Javascript 进行 AJAX 调用（如果你不打算使用任何前端框架，如 AngularJS、Angular、ReactJS、VueJS 等）。
我发布了我是如何解决我的问题的。谢谢你的努力:)我赞成你的回答。

【解决方案2】：

我用你们的 cmets 解决了我的问题：

1) 缺少单引号：

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

2) 对象必须这样解析：

  var hashmap = $.parseJSON(xxx);

3) 在我需要序列化我的对象之前（这不是 ajax 调用，所以我需要手动序列化它）：

Map<String, List<String>> states...
  model.addAttribute("states", new ObjectMapper().writeValueAsString(states));

所以现在我可以读取我的对象了：

var myList = hashmap['STATE1'];
console.log(myList )

将打印[a, b, c, d]，我可以循环：

for(i in myList ){
  console.log(myList[i]);
}

【讨论】：