[JS] Java后台使用EL传值给JS文件

基础知识

JavaScript是在客户端中执行，而EL表达式在服务端执行（EL表达式是在JSP中解析），而服务端比客户端先执行，所以在JavaScript文件中是取不到EL值
当然在JSP页面里的<script>标签是可以取到EL值的，所以我们运用此机制，给JS文件传值

作用

后端数据传给JSP时，可以通过用JS变量保存数据，在客户端使用
便于网站的动态动作，不必使用ajax再次获得数据

环境交代

SpringMVC+Spring+Hibernate+JSP+Jquery

背景

JSP文件中 EL表达式的值。在JS文件中 进行保存备份

测试

文件：MainController.java(控制器文件)

作用：Java后端传值给JSP文件（赋值给EL）

@RequestMapping(value = "/test/{id}")public String test(@PathVariable int id,Model model) {    Map<CityInfo, Set<CityImg> > cityInfoMap = cityInfoService.getCityInfoList(id); //按id查找信息表    model.addAttribute("cityInfoMap", cityInfoMap); //传到JSP页面    return "test"; //跳转到test.jsp页面}

解释：
一个信息表(CityInfo)里对应多张图片(CityImg)
JSP页面中：${cityInfoMap}为map类型

文件：test.jsp(视图文件)

调用JS文件中的函数，把EL值传给JS文件

文件：cityinfo.jsp.js(JS文件)

定义JS变量与函数接收EL表达式的值

输出cityInfoMap变量，进行查看：

输出结果

输出的字符串不是JSON格式（EL传值给JS变量的值为字符串，此字符串不是JSON格式）

结论

传值方法：
1. JS文件中定义一个全局变量 或 传值函数

    //JS文件：    var elVar; //方案一：全局变量    function setEl(tmp) { //方案二：传值函数        elVar = tmp;    }

2. 在JSP文件<script>标签中对 该变量赋值 或 传值给函数.即可完成传值

    //JSP文件：    <script language="Javascript">        elVar = "${name}" //方案一：对全局变量赋值。EL表达式必须放在""里        setEl(elVar); //方案二：传值给传值函数    <script>

EL传值：cityinfo.jsp.js(JS文件)中cityInfoMap（变量）获取的EL表达式的值为String类型，此类型不是JSON格式

缺点：
复杂的数据类型不建议使用此方法，其得到string类型不是JSON数据格式，难以转换。可用ajax向后台获取数据
若要使用，可以根据string规律进行解析字符串得到变量

优点：
此方法可适用于简单的数据类型，比如string类型；可以进行数据备份

注意

1. EL传值给JS文件时，用JS变量之前一定要先给该变量进行赋值
2. 传值所得的JS变量是String类型
3. 在script标签内，EL表达式必须放在”“里

补充（未测试）

此想法未测试，请见谅

发现

偶然发现 EL表达式的值 赋值给 JS变量 时
JS变量接收到的字符串，是EL变量类型的toString()方法输出的结果

若要使用该方法在客户端(JS)对服务端数据(EL值)进行备份，可以重写该类型的toString()方法，使变量输出为JSON格式的字符串。
在客户端(JS)部分接收到的数据再调用JSON.parse()方法转为JS变量

使用

1. 重写类的toString()使输出的字符串为JSON格式
   Java使用jackson包处理JSON

   <!-- json --><dependency>  <groupId>com.alibaba</groupId>  <artifactId>fastjson</artifactId>  <version>1.2.3</version></dependency><dependency>  <groupId>com.fasterxml.jackson.core</groupId>  <artifactId>jackson-annotations</artifactId>  <version>${jackson.version}</version></dependency><dependency>  <groupId>com.fasterxml.jackson.core</groupId>  <artifactId>jackson-core</artifactId>  <version>${jackson.version}</version></dependency><dependency>  <groupId>com.fasterxml.jackson.core</groupId>  <artifactId>jackson-databind</artifactId>  <version>${jackson.version}</version></dependency>

2. JSON数据转为JS变量
   使用JSON.parse(jsonStr)方法转换