Web开发中前台与后台技术小结--关于EL表达式,JSTL,eval()函数

  在我们日常Web开发中,常常用到EL表达式,JSTL标签,还有可能用到JavaScript中的eval()。下面就这样技术和函数小小说明一下。

  EL(Expression Language),全称表达式语言,既然是开发语言,那么就像Java等语言一样是用来写语句的,通常是用在JSP页面中,我们为了获取JSP提供的内置对象的属性值,

我们通常会使用到EL表达式,比如开发中常见的一个需求就是获取项目的根目录,如果项目的名值变化了,我们在指定路径时,如果把项目的根目录用一个变量来表示的话,那么就不

需要修改我们代码,所以此时我们通常会使用到一个常见的表达式${pageContext.request.contextPath},这个表达式的基本解释就是获取JSP的内置对象pageContext的request

对象的属性contextPath的值。到此我们可以举一个小例子来看看${pageContext.request.contextPath}的使用:

比如我们的项目结构是下面:

  --demo

    --src

    --WebRoot

      --WEB-INF

      --css

      --js

      --img

      --font

      --page

  如果我们的jsp文件全部放在page目录下面,其中有一个文件demo.jsp引用了img文件夹下的一张图片nav.jpg,核心代码如下:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
  <head>

    <title>demo演示页面</title>

  </head>

  <body>

    <img alt="nav" src="${pageContext.request.contextPath}/img/nav.jpg">

  </body>

</html>

如果这个项目发布到服务器中去了,以后有需求,说项目名得修改为demonstration,如果我们上面的代码中不使用EL表达式来获取项目名的话,上面的代码可能就是下面的样子

<img alt="nav" src="/demo/img/nav.jpg">,这时如果修改了项目名demo为demonstration,我们demo.jsp代码就得跟着修改为下面的样子

<img alt="nav" src="/demonstration/img/nav.jpg">。

  所以我们使用EL表达式语言的第一个直观的好处就是从页面中抽取可能变化的部分,将其封装为一个变量,这样就方便了代码的维护。当然除了这一点外,我们在开发中还是会

大量使用到EL表达式的,比如获取page域、request域、session域或者application域中的参数和变量,我们经常在页面中写上这样的EL表单式:

<input class="" id="" name="username" type="text" value="${username}" > 这样的input输入框通常出现在表单中,那么后面的value="${username}是什么含义

呢? 因为表单一般是用来封装用户提交的数据,那么如果用户输入有误,表单提交给后台程序处理,后台程序提示报错不能正常按照业务逻辑走下去,比如用户登陆表单中有上面的

<input>输入框,用户输错了用户名,那么就不能正常登陆,页面应该跳转到登陆页面,提示相应的错误,那么如果用户名很长,输入不是很方便的话,我们希望将用户输入的用户

名回显的话,那么${username},就是完成这一功能的。它会从上面讲到的page域开始查找是否有一个变量username,并通过${}来把变量的值获取到,如果没有再从request

域中查找...如果还没有就从session域中查找,如果还没有找到的话,最后会从application域查找,如果有就输出其值,如果还没有找到,就返回‘‘(或者null).所以页面中<input>

第一次是没有值的,如果用户输入了错误的值,页面跳转回来的时候会把用户输入的错误的值回显出来。

  所以EL表达式的第二个用处就是常用来做数据的回显。讲到此处,顺便说下,EL用来做页面数据回显的好处,因为EL底层也是使用Java语言写的,所以使用EL可以轻松获取

Java类型的数据,然而jsp页面最终通过服务器"翻译"成html的时候,只认识string类型的数据,这时使用EL它会自动完成基本数据类型的转换,比如int类型数据,Date类型的数

据。这一点是JavaScript无法比拟的,因为JavaScript是无法直接解析后台传过来的Java类型数据。

  那么开发中常常使用EL的地方还有吗?很显然还是有的,但是它喜欢带上它的朋友JSTL一起。他们通常会一起合作来完成一些工作。比如我们有一个需求就是判断用户是否登

陆,如果登陆则显示相应的操作菜单,我们通常这么使用:

<c:if test="${user != null}">

  <ul class="nav">

    <li><a href="#">个人主页</a></li>

    <li><a href="#">注销</a></li>

  </ul>

</c:if>

所以可以看出来JSTL有点像标签,没错JSTL就是 JSP标准标签库,标签的底层实际上也是使用Java编写的,它通常和逻辑判断有关联,同时呢,它的判断条件很多时候又依赖EL来

获取,所以说JSTL和EL是一对好朋友,互相帮助,彼此协作。JSTL还是有很多的功能的,限于时间和篇幅,我就把开发中常见的JSTL标签的使用场景列举一下:

(1)使用JSTL标签的core标签,常常使用别名c,比如<c:set>设置值,用来来时存储一个值,一般是是供function标签使用的、<c:out>输出值,可以实现自动转义,防止脚本攻

击,<c:url>可以拼接url路径并带上参数,这样也可以防止提交参数乱码;

(2)还有刚才说到function标签,我们可以截取内容显示,fn:substring();

(3)除此之外我们还常常用到数据的格式化显示别名fmt的标签,实现格式化显示日期,数据,货币。

  最后说明一下,JavaScript中的eval(),首先它是一个函数,它的功能是:可计算某个字符串,并执行其中的的 JavaScript 代码,但是我们很少直接使用,我们使用它的情况是

使用eval()来将json格式的数据的字符串解析成一个对象,比如下面的例子:

var data = ‘{"return_code":0,"return_message":"success","data":{"data":[{"id":"1","question":"公主令牌在哪交?"},{"id":"2","question":"公主护使有什么用?"},{"id":"3","question":"角斗场在哪?"},{"id":"4","question":"北部断层在哪?"},{"id":"5","question":"欢乐令有什么用?"},{"id":"6","question":"令牌积分有什么用?"},{"id":"7","question":"南部断层在哪?"},{"id":"8","question":"大妖魔令牌交给谁?"},{"id":"9","question":"神工坊在哪?"},{"id":"10","question":"警戒妖珠有什么用?"}]}}‘;

我们可以通过下面的代码获取上面类Map对象数据:

var obj = eval("("+data+")");

alert("return_code:"+obj["return_code"]);

alert("第一个问题id:" + obj["data"]["data"][0]["id"]);

  好了,时间不早了,祝自己做一个拯救世界的好梦!世界不早了,Good Night ,World !

 

时间: 2024-10-05 14:58:00

Web开发中前台与后台技术小结--关于EL表达式,JSTL,eval()函数的相关文章

Java Web 开发中路径相关问题小结

Java Web开发中路径问题小结 (1) Web开发中路径的几个基本概念 假设在浏览器中访问了如下的页面,如图1所示: 图1 Eclipse中目录结构如图2所示: 图2 那么针对这个站点的几个基本概念表述如下: 1. web站点的根目录:http://localhost:8080/ 2. web应用程序的的根目录:http://localhost:8080/test/ 3.同级目录:http://localhost:8080/test/articles/article1.jsp和http://

Java Web开发中路径问题小结

看以博客感觉不错,分享一下http://www.cnblogs.com/tianguook/archive/2012/08/31/2665755.html (1) Web开发中路径的几个基本概念 假设在浏览器中访问了如下的页面,如图1所示: 图1 Eclipse中目录结构如图2所示: 图2 那么针对这个站点的几个基本概念表述如下: 1. web站点的根目录:http://localhost:8080/ 2. web应用程序的的根目录:http://localhost:8080/test/ 3.同

WEB开发中的字符集和编码

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption

【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OSS(https://www.aliyun.com/product/oss) 4.HTTPS(http://baike.baidu.com/view/14121.htm) 阅读目录结构 引: 一.准备工作 二.整体功能结构 三.具体实现步骤 四.关键点和问题处理 五.延伸与扩展 六.总结与思考 引:

WEB开发中一些常见的攻击方式及简单的防御方法

WEB开发中一些常见的攻击方式及简单的防御方法 20151127 转载http://www.lvtao.net/dev/582.html SQL注入最常见的攻击方式,所谓SQL注入,就是通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令,比如先前的很多影视网站泄露VIP会员密码大多就是通过WEB表单递交查询字符暴出的,这类表单特别容易受到SQL注入式攻击. 跨站脚本攻击(XSS)跨站脚本攻击(也称为XSS)指利用网站漏洞从用户那里恶意盗取

Web 开发中很实用的10个效果【附源码下载】

在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记得收藏:) 超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网

Web开发中 前端路由 实现的几种方式和适用场景

浅析Web开发中前端路由实现的几种方式 主题 Web开发 故事从名叫Oliver的绿箭虾`说起,这位大虾酷爱社交网站,一天他打开了 Twitter ,从发过的tweets的选项卡一路切到followers选项卡,Oliver发现页面的内容变化了,URL也变化了,但为什么页面没有闪烁刷新呢?于是Oliver打开的网络监控器(没错,Oliver是个程序员),他惊讶地发现在切换选项卡时,只有几个XHR请求发生,但页面的URL却在对应着变化,这让Oliver不得不去思考这一机制的原因- 叙事体故事讲完,

如何OE开发中实现一个在web开发中的小效果

近期公司里面有一个需求,就是当业务人员点击订单列表中的某一条时希望打开一个新的窗口动作,然后把这一条记录中的某些值带过去,这样一个效果在web开发中很简单,或许就是分分钟的事情.但是在客户端这种开发中确实不易,尤其是OpenERP这种有诸多限制的框架里面. 那么如何实现呢? 这个地方我的想法主要分两步:1.打开一个新的窗口(Form视图的)2.把值带入到新的窗口里面. 第一步里面我按日常的操作在view里面创建一个向导(wizard),然后给name和id赋值,然后在创建一个wizard文件(名

【转载】Web 开发中很实用的10个效果【附源码下载】

超炫的页面切换动画效果 今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果. 立即下载      在线演示 美!视差滚动在图片滑块中的应用 视差滚动(Parallax Scrolling)已经被广泛应用于网页设计中,这种技术能够让原本平面的网页界面产生动感的立体效果.美女很养眼吧 :) 源码下载      在线演示 网页边栏过渡动画 以细微的过渡动画显示一些隐藏的侧边栏,其余的内容也是.通常侧边栏滑入,把其他内容推