如何使用 Spring MVC 从 javascript 访问 java Map<String, String>

Question

在使用 Spring MVC 时从 javascript 访问 java Map 的最佳方法是什么？

我正在构建一个网页，根据您从复选框中选择的值，动态文本将出现在另一个 div 中，并使用 getElementById("element").innerHTML=${ 提供有关该选项的更多详细信息变量}。

我正在使用 Maps 来填充复选框选项，它在 JSP 中运行良好，但在 javascript scriptlet 或外部 .js 文件中根本无法运行。它只是将其理解为一个字符串，而不是一个 Map 或 Array。

以下代码是我目前得到的：

属性文件：

checkBoxItems={'0':'The Value'}
myMapObject={'0','Map Stuff'}

在控制器 java 文件中：

@Controller
@RequestMapping(value = "/example")
public Class ExampleController
{

     @Value("#{${checkBoxItems}}")
     Map<String, String> checkBoxOptions;

     @Value("#{${myMapObject}}")
     Map<String, String> myMapObject;

     @RequestMapping(value = "/newExample", method = RequestMethod.GET)
     public String Hello(Model model)
     {
     model.addAttribute("checkBoxOptions", checkBoxOptions);
     model.addAttribute("myMapObject", myMapObject);

     return "view";

     }
}

在 JSP 中：（我已经简化以显示我的目标）

<form:select class="custom-select" id="metodologia" path="metodologia"
      onchange="FillWithComplement('${myMapObject}')">

    <form:option value="-">Select an Option</form:option>
    <form:options items="${checkboxOptions}"/>

</form:select>

在第一次 javascript 试用中：

<script>

     function FillWithComplement(MapObject) 
     {

     document.getElementById("div").innerHTML = MapObject;
     }

</script>

输出是：

 {0=Map Stuff}

如果我这样做也不起作用：

<script>

     function FillWithComplement(MapObject) 
     {

     var newMap = new Map(MapObject);
     document.getElementById("div").innerHTML = newMap;
     }

</script>

而且我知道我可能没有足够的 javascript 知识来处理这个正确性。 谢谢。

编辑：

正如Yan Khonski 所建议的那样，通过异步请求 (ajax) 将数据作为 JSON 传递可以进行细微的更改。

• dataType: 'json' 返回一个 JSON 对象，所以不需要实现 JSON 解析方法。

最终代码：

 var globalMetodologiaComplemento;

 $(document).ready(function () {
     $.ajax({
         type: 'GET',
         url: '/gla/getMet',
         dataType: 'json',
         success: function (data) {

             globalMetodologiaComplemento = data;
             console.log(globalMetodologiaComplemento[0]);
         }
     });
 });
 (...)

Answer 1

您可以拥有一个以 JSON 格式返回数据的 REST 端点。然后您的客户端 - javascript 代码将向其余端点发出异步请求（在页面加载后）并获取数据。然后 js 代码会将 JSON 解析为对象并可以使用它。

1) 控制器返回模型和视图。该视图是一个 JSP 页面。

@Controller
@RequestMapping(value = "/example")
public Class ExampleController
{

     @Value("#{${checkBoxItems}}")
     Map<String, String> checkBoxOptions;

     @Value("#{${myMapObject}}")
     Map<String, String> myMapObject;

     @RequestMapping(value = "/newExample", method = RequestMethod.GET)
     public String Hello(Model model) {
         model.addAttribute("checkBoxOptions", checkBoxOptions);
         model.addAttribute("myMapObject", myMapObject);

         return "view";
     }

    @ResponseBody
    @GetMapping("/additional-data")
    public String getData() {
        return objectMapper.writeValueAsString(yourObject);
    }
}

检查 Jackson 库以将对象序列化为 JSON。

2) 加载 jsp 页面后，您可以向控制器中的另一个端点发出异步 (AJAX) 请求。此端点将返回 JSON 数据（您必须将对象序列化为 JSON）。 https://api.jquery.com/jquery.ajax/

How to parse JSON data with jQuery / JavaScript?

https://stackoverflow.com/a/32593283/1839360

$(document).ready(function(){
$.ajax({
  type: 'GET',
  url: 'http:localhost:8080/example/additional-data',
  dataType: 'json',
  success: function (data) {
    //data downloaded so we call parseJSON function 
    //and pass downloaded data
    var object = $.parseJSON(data); // use browser debugger to see that properties the object has
  }
});
});

3) 您的客户端 JS 代码将收到来自 AJAX 调用的响应并解析数据。