js檔案中使用el運算式問題

標籤：i++   ace   alt   false   ges   query   imp   tag   alert   

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中直接獲得使用。

 

 

js檔案中使用el運算式問題