Thymeleaf 内联JS

原理

前端网页利用thymeleaf模板引擎获取数据，可以在html标签内可通过th标签加${}表达式访问model里的对象数据。但如果不想通过th标签而是简单地访问model对象数据，或是想在javascript代码块里访问model中的数据，则要使用内联的方法。 　 内联语法的格式为：[[${xxxx}]] 内联语法可以

• 读取服务器端变量
• 调用内置对象的方法等

示例 服务器端代码

@GetMapping("fun2")
public ModelAndView fun2(){
    ModelAndView mav = new ModelAndView("index");
    mav.addObject("dept", JsonUtil.obj2String((new Dept(10,"sales","CHICAGO"))));
    //mav.addObject("max",99);
    return mav;
}

页面代码

    
    Title


dept, [[${dept}]]!

    /**/                  // 基于XML的转义写法
    let max = [[${max}]];
    console.info(max);

    let path = [[${#request.getContextPath()}]];
    console.info(path);

    let dept1 = [[${dept}]];
    console.log(dept1)
    console.log(dept1.deptno)

    let dept2 = JSON.parse([[${dept}]])
    console.log(dept2)
    console.log(dept2.dname)
    /*]]>*/                // 基于XML的转义写法

效果