在说相关内容前,一定要先熟悉jsp运行原理: 
http://blog.csdn.net/lmsnju/article/details/4813488 
http://hi.baidu.com/mingfang0219/blog/item/a13db6de9b36ee1e6327989f.html 
http://blog.sina.com.cn/s/blog_5ce1157b0100wjbv.html 

el表达式(运用el表达式直接获取值时,例如,${msg},不需要为msg提供set get方法;但是当获取对象的属性值时,例如,user.name,则必须为name属性提供set get方法)是jsp相关的概念,是在服务端执行的,服务端执行完成后再传给客户端浏览器,js是在客户端浏览器执行的,el在js前就已经被执行了。EL、JSTL以及其他各种标签是在服务端执行好后再通过网络传送给客户端,浏览器客户端收到后才会执行其中的js脚本。也就是说,el表达式生效的时候js代码还全都是文本,等js生效的时候早就没了el表达式了,你可以在浏览器中查看源代码,你就会发现el标签${}全没了,都转化为具体的值了。jsp和js不是一个平面上的东西,它们不可能在同一个时刻同时执行,它们没有任何交叉点。所以标题中“使用”两个字采用双引号,并不是js真正地使用el表达式,而是使用el表达式最终转化的值。 

类似的,对于js中“使用”java代码,与使用el表达式是一个道理:JSP是先进行编译把java代码都编译出来形成一张完整的页面再发到客户端,js只是在客户端执行,等到js执行的时候其实js已经看不到java代码了。 

如何在js代码(代码段或者js文件中的代码)中,获取el表达式的值或者java代码的值?可以通过下面的方式获取: 
jsp文件中的js获取jsp页面中el表达式的值:    var aaa = "${message}" 
jsp文件中的js获取jsp页面中java代码的变量值:var aaa = "<%=JAVA变量名 %>" 
所以,先在jsp文件中:定义js变量获取el表达式的值或者java代码的值:

  1. <script type="text/javascript">
  2. var aaa = "${user.name}";                  //获取el表达式的值,此时aaa="jack"
  3. var nnn = "<%=Constants.getValue()%>";     //获取java代码的值,此时nnn="3"
  4. </script>

然后在其他js代码段中或者js文件中,就可以直接访问aaa跟nnn了。 

你可能已经注意到了:上面的el表达式跟java代码都加了引号,这样做,不管值是什么类型,都会转为字符串。如果el表达式跟java代码不加引号,会怎么样呢?看下面:

  1. <script type="text/javascript">
  2. var aaa = ${user.name};              //在js执行的时候代码为var aaa = jack; 此时会把jack看做一个变量处理,如果此时碰巧js全局有jack变量,那就会把jack变量的值赋给aaa,否则报undefined错
  3. ;此时typeof(nnn)为number类型
  4. </script>

所以如果值是字符串类型的,最好加上引号;如果是数字类型的,可以加(会转为字符串),也可以不加(number类型)。参考:http://hi.baidu.com/sun321000s/blog/item/8551cc8eb6c3c18fa5c27255.html 

总结: 
在js文件中不能直接使用el表达式以及java代码(浏览器是识别不了jsp中el等标签的:返回给客户端的结果是JSP文件执行的结果,不包含任何JSP语法)。但是el表达式、java代码、js脚本、jstl标签等都可以在jsp文件中使用,所以要想在js代码中使用el表达式的值或者是java代码的值,可以通过jsp文件这样一个桥梁,达到目的! 

js写在jsp文件里,jsp能用的标签(el表达式、jstl标签、java代码等),js就能“用”;js单独写成一个文件,啥标签都不能“用”,都没效。不过一般不建议js使用乱七八糟的jsp标签。 

附: 
JSTL核心标签库的使用:http://www.cnblogs.com/lihuiyy/archive/2012/02/24/2366806.html 
EL表达式:http://www.cnblogs.com/Fskjb/archive/2009/07/05/1517192.html

js中“使用”el表达式的更多相关文章

  1. js 中使用el表达式 关键总结:在js中使用el表达式一定要使用双引号

    js 中使用el表达式 关键总结:在js中使用el表达式一定要加双引号 js控制中用到了el表达式,最开始源码如下: var selected = ${requestScope.xxxxForm.re ...

  2. 转:el表达式获取map对象的内容 & js中使用el表达式 & js 中使用jstl 实现 session.removeattribute

    原文链接: ①EL表达式取Map,List值的总结 ②在jsp中使用el表达式通过键获得后台的一个map<Long,String>的值 ③在javascript中使用el表达式(有图有真相 ...

  3. 怎样在js中使用EL表达式

    相信已经有很多人对如何在js中使用EL表达式存有困惑,各种引号的处理不胜其烦. 1.在js(嵌入jsp页面)中通过定义变量的方式使用EL表达式: 如:var url = '${param.url}'; ...

  4. JS中使用EL表达式方法与获取工程名字

    关键: 在js中使用el表达式一定要使用双引号      分两种情况 1. JS代码在JSP页面中, 这可以直接使用EL表达式. 如: <script type="text/javas ...

  5. js中使用EL表达式总结

    1.js中使用el表达式要加双引号或单引号:'${list}' 2.js变量获取el表达式中的对象:不能直接获取,直接获取得到的是该对象的toString值. 有两种方法:一:el中直接写对象的属性v ...

  6. JS中输出EL表达式

    要在javascript中使用El表达式,需要在el表达式两端加上单引号或者双引号 <script type="text/javascript"> jQuery(doc ...

  7. JS中使用EL表达式

    转自:http://blog.csdn.net/monkeyking1987/article/details/17146951 分两种情况 1. JS代码在JSP页面中, 这可以直接使用EL表达式. ...

  8. JS中遍历EL表达式中后台传过来的Java集合

    前言:在我的项目里有这么一个情况,后台直接model.addAttribute()存储了一个对象,此对象内部有一个集合,前端JSP处理的方法正常情况下就是直接使用EL表达式即可.但是如果在JS中需要使 ...

  9. js中取el表达式问题

    例如常用的${pageContext.request.contextPath} 如果需要在js中用到 分两种情况: 如果js是直接写在jsp中 可以直接写el表达式 例如: 如果js是写在外部,jsp ...

随机推荐

  1. 常用框架(一):spring+springMvc+mybatis+maven

    项目说明: (1) 本例采用 maven web 工程做例子讲解 (2) 利用mybaits 提供的代码生成工具自动生成代码(dao接口,sql mapper映射文件,pojo数据库映射类) (3) ...

  2. Android平台Overlay机制【转】

    本文转载自:http://blog.csdn.net/wh_19910525/article/details/39254815 Android overlay 机制允许在不修改packages中apk ...

  3. hdoj--2119--Matrix(最小点覆盖)

    Matrix Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Sub ...

  4. 框架-Eureka:初识 Eureka

    ylbtech-框架-Eureka:初识 Eureka 1.返回顶部 1. 1.1. http://localhost:2100/ 1.2. 2. Eureka - Last N events 3. ...

  5. POJ3414 Pots

    题目: 给你两个容器,分别能装下A升水和B升水,并且可以进行以下操作 FILL(i)        将第i个容器从水龙头里装满(1 ≤ i ≤ 2); DROP(i)        将第i个容器抽干 ...

  6. Gerapy 使用详解

    https://blog.csdn.net/fengltxx/article/details/79894839

  7. 你必须知道的.net导航

    http://www.cnblogs.com/anytao/archive/2007/09/14/must_net_catalog.html

  8. IE之css3效果兼容

    一.兼容css阴影效果(ie滤镜) 1.Shadow,阴影 .shadow { -moz-box-shadow: 3px 3px 4px #000; -webkit-box-shadow: 3px 3 ...

  9. Android RecyclerView、ListView实现单选列表的优雅之路.

    一 概述: 这篇文章需求来源还是比较简单的,但做的优雅仍有值得挖掘的地方. 需求来源:一个类似饿了么这种电商优惠券的选择界面: 其实就是 一个普通的列表,实现了单选功能, 效果如图:  (不要怪图渣了 ...

  10. 读书笔记8-浪潮之巅(part3)

    浪潮之巅 ——风险投资 <浪潮之巅>的前半部分列举了在现代史上举足轻重的几家大型科技公司的历史,虽说成功的公司各有各的绝招,但是读多之后又略显重复.无聊(这不是说原书的内容.描述是无聊的, ...