js中“使用”el表达式

在说相关内容前，一定要先熟悉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代码的值：

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

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

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

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

评论

1 楼 AlexBlume 2016-10-19