如何将 Spring mvc 控制器变量传递给 javascript

Question

我正在尝试从一个对象中获取一个 javascript 函数的变量，该对象将其发送给控制器查看。

我正在使用的对象是 Bpmsn。

通过控制器，我将对象注入到视图中。

我的控制器方法是：

@RequestMapping(value = "/display")
public ModelAndView index2(@RequestParam int bpmsnId) {
    ModelAndView result;
    Bpmsn bpmsn;

    bpmsn = bpmsnService.findOne(bpmsnId);

    result = new ModelAndView("editor/display");
    result.addObject("bpmsn", bpmsn);

    return result;
}

我用这个方法来显示对象。

在 jsp 视图中，我注入对象的属性，除了我将在 javascript 脚本中使用的 textXML。

<div>
<ul>
    <li><b><spring:message code="bpmsn.ticker" />:</b> <jstl:out
            value="${bpmsn.ticker}" /></li>
    <li><b><spring:message code="bpmsn.title" />:</b> <jstl:out
            value="${bpmsn.title}" /></li>
    <li><b><spring:message code="bpmsn.summary" />:</b> <jstl:out
            value="${bpmsn.summary}" /></li>
    <li><b><spring:message code="bpmsn.authoredMoment" />:</b> <jstl:out
            value="${bpmsn.authoredMoment}" /></li>
    <li><b><spring:message code="bpmsn.likes" />:</b> <jstl:out
            value="${bpmsn.likes}" /></li>
    <li><b><spring:message code="bpmsn.dislikes" />:</b> <jstl:out
            value="${bpmsn.dislikes}" /></li>
</ul>

使用 textXML 属性，我想创建一个 javascript 函数来将该 xml 导入 bpmn 建模器，但我不知道如何从 javascript 脚本中获取注入到视图中的对象的 textXML 属性

我尝试在视图中调用该属性，但它不起作用

<script type="text/javascript">
    var bpmnXML = ${bpmsn.textXML}; //not work
    alert(bpmnXML)
    // BpmnJS is the BPMN viewer instance
    var viewer = new BpmnJS({
        container : '#canvas'
    });

    // import a BPMN 2.0 diagram
    viewer.importXML(bpmnXML, function(err) {
        if (err) {
            // import failed :-(
            alert('could not import BPMN 2.0 diagram', err);
        } else {
            // we did well!
            var canvas = viewer.get('canvas');
            canvas.zoom('fit-viewport');
        }
    });

Answer 1

例如，我们可以将 Spring MVC 变量传递给 Javascipt：

 <script>
    var number = [[${number}]];
    var message = "[[${message}]]";
</script>

Answer 2

存储在模型中的 Java 对象，由于在客户端执行，因此无法在脚本中访问。

简单而简单的解决方案是在 JSON 中序列化对象，将其添加到模型中，在 Javascript 中访问。

你需要这样的东西。

ObjectMapper objectMapper = new ObjectMapper();
result.addObject("bpmsn", objectMapper.writeValueAsString(bpmsn));

并且可以简单的在脚本中访问。

var bpmnJsonString = '${bpmsn}';
Obj bpmn = JSON.parse(bpmnJsonString);
var bpmnXML = bpmn.textXML; 
alert(bpmnXML)

希望它能解决您的问题。

Answer 3

这不起作用，因为var bpmnXML = ${bpmsn.textXML}; 仅在客户端执行。

一种解决方案是您可以引入一个隐藏字段，该字段的属性值为${bpmsn.textXML}，它将在服务器端执行。您将能够在您的 javascript 中访问此值（我将使用 jQuery 进行说明）。
例如

<input id="bpmsn-textxml" type="hidden" data-textxml="${bpmsn.textXML}"/>

var bpmnXML = $("#bpmsn-textxml").data("textxml");