如何将地图从java传递给javascript？

Question

我有一个下拉列表和旁边的信息工具提示图标，当用户更改下拉列表中的值然后将鼠标悬停在信息图标上时，应显示选择的说明...如图：

现在我在后端有一个值映射，其中键是下拉值，值是描述，我希望这个映射可用于前端（javascript），我有很多选择：

1-每次更改值都会进行ajax调用（不好，因为很多调用后端而不需要因为地图实际上是静态的）

2-将地图作为json对象传递给某个html隐藏元素然后读取它...但问题是在将json元素设置为html元素之前在json中转义引号和其他类似内容

3-使用数据属性....但我正在处理的框架不支持HYML5

4-页面加载后进行一次ajax调用，读取json并将其放入javascript var ....但是再次向后端发出无用的请求

5-在我的JSP中创建一个全局变量（使用声明元素）....但这不是线程安全的，会导致我使用scriplets

我去了第五个解决方案，因为地图是静态的并且没有太多的并发问题....更多关于我正在研究的框架完全是用scriplets编写的

是否有人从我提到的解决方案或任何其他解决方案中得到其他推荐....

Answer 1

  

2-将地图作为json对象传递给某个html隐藏元素然后读取它...但问题是在将json元素设置为html元素之前在json中转义引号和其他类似内容

您可以使用JSON.stringify()及更高版本JSON.parse()轻松解决此问题。

所以我建议使用这种方法 - 将json对象字符串化并将其放在一个元素中，然后你就可以解析数据了。

var obj = {foo: 'bar', arr: ['baz','foobar']};

var el = document.getElementById('jsonData');

// setting the value here -- you would do this in your jsp template
el.setAttribute('data-json', JSON.stringify(obj));

console.log(JSON.parse(el.getAttribute('data-json')));

<div style="display:none" id="jsonData"></div>

Answer 2

这是我的方法。

1. 为每个选项生成镜像DOM元素。默认情况下，这些元素是隐藏的。
2. 当在选项框的Onchange事件或鼠标悬停在工具提示图标上时，处理消息并显示。

对于JSP循环，您可以再次使用2种方法。这些是选择框的值和索引。

1.您可以使用组合框的值字段（下拉列表/ html选择）：$ {c.id}

2.您可以使用循环索引：$ {cStatus.index}

<c:forEach items="${somethingList}" var="c" varStatus="cStatus">        
    <input type="hidden" id="hiddenToolTip${${cStatus.index}" value="you have selected XXX. XXX is blah blah blah">
 </c:forEach>

之后在鼠标悬停工具提示功能事件：

您可以读取当前所选选项选择的索引或所选值，并从隐藏字段中读取值 并显示工具提示。

var tooltipText=document.getElementById("hiddenToolTip"+ document.getElementById("comboBoxId").value ).value;
alert("here is tooltip text="+tooltipText);