js文件中使用el表达式问题

Posted 2020-10-04 李慕白

作者：Sang

单独js文件不能用el表达式。

首先，JSP是由服务端执行的，EL表达式自然也由服务端解析执行，因此如果EL所在的脚本在JSP页面内，它是可以获取到值的，这个值在服务器端返回到浏览器端时已经解析完毕，浏览器端只是呈现而已，但是如果在单独的JS文件中写EL，会怎么样呢？这个时候是无法获取的，因为JavaScript是客户端执行，单独的JS文件不在服务器的解析执行之中，EL是不起任何作用的，这个时候它就等同于普通的字符串，那么如何解决这种情况呢？

一：可以通过window.onload()来得到EL的值再传送给JS文件里的全局变量、方法进行变量初始化 。

二：可以在JSP页面中添加一个隐藏域，给它赋值，在单独的js文件中，通过获取隐藏域的值就间接的获取到了EL表达式的值。

举例：

 

jsp页面（引用jQuery文件和register.js 添加两个隐藏域）

 

[html] view plain copy

 

1. <script type="text/javascript"  
2.             src="${pageContext.request.contextPath}/js/jquery-1.4.3.js">  
3.          </script>  
4. <script type="text/javascript"  
5.             src="${pageContext.request.contextPath}/js/register.js">  
6.          </script>  
7. <input id="okPic" type="hidden" value="${pageContext.request.contextPath}/images/jsPic/ok.png"/>  
8. <input id="errorPic" type="hidden" value="${pageContext.request.contextPath}/images/jsPic/error.png"/>  

 

 

register.js文件（设置全局变量ok,error       $(function(){   });当引用这个js文件的页面加载完毕就执行这个函数.相当于window.onload(),然后在其他函数中就可以直接引用ok,error全局变量.）

 

[javascript] view plain copy

 

1. var ok ="";        
2. var error = "";  
3. $(function(){                               
4.     ok = $("#okPic").val();  
5.     error = $("#errorPic").val();  
6. });  

这样就能获得想要jsp中el表达式的值

 

在实际开发中，我们jsp页面开发往往需要写事件和方法，页面和js逻辑都是分离，这样容易造成有些变量是通过el表达式获得，而在js里面我们需要使用el表达式获得的值进行一些逻辑处理。

我的项目中遇到的举例说明。

一：最常见的是url路径请求：

jsp页面获得服务器地址：

 

[html] view plain copy

 

1. <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>  
2. <%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
3. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
4. <%  
5.     String ctxPath = request.getContextPath();  
6.     request.setAttribute("ctxPath", ctxPath);  
7.     String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()  
8.             + ctxPath + "/";  
9.     request.setAttribute("basePath", basePath);  
10. %>  
11. <%@ page import="com.doron.sys.main.controller.PageURL" %>  
12. <%  
13. String pageUrl=PageURL.getUrl();  
14. %>  
15. <script>  
16.     var basePath = ‘<%=basePath%>‘;  
17.     var sessionAlert = ‘<spring:message code="itmp.tcs.inc.sessionAlert"/>‘;  
18.     function reload(data){  
19.         //if (res != null && res == "session_timeout") {  
20.         //  window.opener.location.href=basePath+"login.do";  
21.         //}  
22.         var status =data.getResponseHeader("sessionstatus");  
23.         if (data != null && status != null && status == ‘timeout‘) {  
24.                 messconfirm3(sessionAlert,function(){  
25.                     top.location.href=basePath+"login.do";  
26.                 });  
27.                 //alert(‘连接已超时请重新登录！‘);  
28.             }  
29.     }  
30. </script>  

js页面：

 

 

[javascript] view plain copy

 

1. //到警和反馈初始化出警人信息  
2. function initArrivePerson(divId) {  
3.     var jqids = $("#jqid").val();//获得警情id  
4.     $.ajax({  
5.          type:"post",     
6.          url:basePath + "kscj/findArrivePerson.do",  
7.          data:{"jqid":jqids},  
8.          dataType:"json",  
9.          async: false,  
10.          cache:false,  
11.          success : function(data) {  
12.              $("#"+divId).html("");  
13.              var arrivePerson="";  
14.              for (var i=0;i<data.length;i++) {  
15.                  arrivePerson+="<span>";  
16.                  arrivePerson+="<input type=\"checkbox\"  name=\"cjrxm\"  value=\‘"+data[i].sjybh+"\‘/><span>"+data[i].sjyxm+"</span>";  
17.                  arrivePerson+="<input type=\"hidden\"  name=\"cjdbh\"  value=\‘"+data[i].cjdbh+"\‘/>";  
18.                  arrivePerson+="</span>";  
19.              }  
20.              $("#"+divId).append(arrivePerson);   
21.          }  
22.     });  
23. }  

在jsp中引入需要的js文件，在jsp通过el获得服务器地址baseBath，然后定义变量，则在js中直接获得使用。