文章目录

  • 基础知识
  • 作用
  • 环境交代
  • 背景
  • 测试
  • 文件：MainController.java(控制器文件)
  • 文件：test.jsp(视图文件)
  • 文件：cityinfo.jsp.js(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文件

es6 赋值后其他页面取不到 el表达式赋值给js_JSON

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

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

es6 赋值后其他页面取不到 el表达式赋值给js_JSON_02


输出cityInfoMap变量，进行查看：

es6 赋值后其他页面取不到 el表达式赋值给js_ci_03

输出结果

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

es6 赋值后其他页面取不到 el表达式赋值给js_javascript_04

结论

传值方法：

  1. JS文件中定义一个全局变量 或 传值函数
//JS文件：
 var elVar; //方案一：全局变量
 function setEl(tmp) { //方案二：传值函数
 	elVar = tmp;
 }
  1. 在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>
  1. JSON数据转为JS变量
    使用JSON.parse(jsonStr)方法转换