博客

JSTL与EL表达式

  • Post author:
  • Post category:其他

JSTL与EL表达式

JSTL与EL表达式

  • 掌握EL表达式的书写方法
  • 掌握JSTL的常用标签

一、 EL表达式

EL（Expression Language）表达式语言，用于简化JSP的输出

EL表达式的基本语法：${表达式}
示例：<h1>学生姓名：${student.name}</h1>

例子，下面是正常编写：

package com.test.el;

public class Student {
	private String name;
	private String mobile;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getMobile() {
		return mobile;
	}
	public void setMobile(String mobile) {
		this.mobile = mobile;
	}
	
	
}


package com.test.el;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**s
 * Servlet implementation class StudentServlet
 */
@WebServlet("/info")
public class StudentServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public StudentServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Student stu = new Student();
		stu.setName("张三");
		stu.setMobile(null);
		String grade = "A";
		
		//获取
		request.setAttribute("student", stu);
		request.setAttribute("grade", grade);
		//请求转发
		request.getRequestDispatcher("/info.jsp").forward(request, response);
		
	}

}


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" import = "com.test.el.Student"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<%
		Student stu = (Student)request.getAttribute("student");
		String grade = (String)request.getAttribute("grade");
		out.println("<h1>姓名" + stu.getName() + "</h1>");
		out.println("<h2>手机" + stu.getMobile() + "</h2>");
		out.println("<h2>教师评级" + grade + "</h2>");
	%>
</body>
</html>

结果：
alt

可以看到编写jsp的时候有些繁琐，为了简化代码我们使用EL表达式：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>姓名：${requestScope.student.name }</h1>
	<h2>手机：${requestScope.student.mobile }</h2>
	<h2>评级：${requestScope.grade }</h2>
</body>
</html>

输出：alt

1. EL的作用域对象

EL表达式内置了四种作用域对象

作用域对象 描述
pageScope 从当前页面取值
requestScope 从当前请求中获取属性值
sessionScope 从当前会话中获取属性值
application 从当前应用获取全局属性值

作用域对象可以忽略不写，当不写时，el则按照作用域从小到大依次尝试获取。我们最好还是自己填写作用于对象，否则让系统去查找会降低效率。

2. EL表达式的输出

语法：${[作用域.]属性名[.子属性]}

  • EL表达式支持将运算结果进行输出
  • EL支持绝大多数对象输出，本质是执行toString()方法

3. EL输出参数值

EL表达式内置param对象来简化参数的输出
语法：${param.参数名}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>姓名：${requestScope.student.name }</h1>
	<h2>手机：${requestScope.student.mobile }</h2>
	<h2>讲师：${param.teacher }</h2> 
	<h2>评级：${requestScope.grade }</h2>
</body>
</html>

结果：alt

4. 总结

  • EL（Expression Language）表达式语言，用于简化JSP的输出
  • EL表达式基本语法：${表达式}
  • 示例：<h1>学生姓名：${student.name}</h1>
  • EL表达式内置的四个作用域对象
  • 忽略书写作用域对象时，EL则按照作用域从小到大依次尝试获取
  • EL表达式输出语法：${[作用域.]属性名[.子属性]}
  • EL表达式支持绝大多数对象输出，本质是执行toString()方法
  • EL表达式内置了param对象来简化参数的输出
  • EL表达式输出参数语法：${param.参数名}

二、 JSTL介绍与下载

  • JSTL（JSP Standard Tag Library），JSP标准标签库
  • JSTL用于简化JSP开发，提高代码的可读性与可维护性

1. 下载JSTL

  1. 官网地址：http://tomcat.apache.org
  2. JSTL v1.2.5组件介绍
    | 作用域对象 | 含义 |
    | ——– | :—– |
    |taglibs-standard-spec-1.2.5.jar| 标签库定义包（必须）|
    |taglibs-standard-impl-1.2.5.jar| 标签库实现包（必须）|
    |taglibs-standard-jstlel-1.2.5.jar| el表达式支持包（备选）|
    |taglibs-standard-compat-1.2.5.jar| 1.0版本兼容包（备选）|
  3. JSTL安装
    • 将jar文件复制到工程的/WEB-INF/lib目录（推荐）
    • 将jar文件复制到Tomcat安装目录的lib目录

2. JSTL的引用

JSTL按功能可以分为五类标签库

作用域对象
核心标签库- core
格式化输出标签库- fmt
SQL操作标签库- sql
XML操作标签库- xml
函数标签库- functions

后面三种已经不常用。

3. 核心标签库

核心标签库是JSTL最重要的库，提供了JSTL的基础功能。
在jsp页面顶端书写：<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
JSTL核心标签库在taglibs-standard-impl.jar由META-INF/c.tld定义

4. 判断标签

JSTL提供了两组判断标签

  • <c:if> 单分支判断
  • <c:choose> 、 <c:when> 、 <c:otherwise> 多分支判断

单分支：

package com.test.jstl;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class JstlServlet
 */
@WebServlet("/jstl")
public class JstlServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JstlServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setAttribute("score", 78);
		request.setAttribute("grade", "B");
		request.getRequestDispatcher("/core.jsp").forward(request, response);
	}

}


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 在Java或JSP中输入ALT + / 可出现智能提示 -->
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>${requestScope.score }</h1>
	<c:if test="${score >= 60 }">
		<h1 style="color:green">恭喜，你已经通过测试</h1>
	</c:if>
	<c:if test="${score < 60 }">
	<h1 style="color:red">对不起，再接再厉</h1>
	</c:if>
</body>
</html>

alt

多分支：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 在Java或JSP中输入ALT + / 可出现智能提示 -->
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>${requestScope.score }</h1>
	<c:if test="${score >= 60 }">
		<h1 style="color:green">恭喜，你已经通过测试</h1>
	</c:if>
	<c:if test="${score < 60 }">
	<h1 style="color:red">对不起，再接再厉</h1>
	</c:if>
	
	<!-- choose when otherwise -->
	${grade }
	<c:choose>
		<c:when test="${grade == 'A' }">
			<h2>你很优秀</h2>
		</c:when>
		<c:when test="${grade == 'B'}">
			<h2>不错哦</h2>
		</c:when>
		<c:when test="${grade =='C' }">
			<h2>水平一般，需要提高</h2>
		</c:when>
		<c:when test="${grade == 'D' }">
			<h2>需要努力啦，不要气馁</h2>
		</c:when>
		<c:otherwise>
			<h2>一切随缘吧</h2>
		</c:otherwise>
	</c:choose>
</body>
</html>

alt

5. JSTL遍历集合

<c:forEach>标签用于遍历集合（collection）中的每一个对象

例如：

<!-- var是数据元  items是对应一个LIST或者SET  varStatus循环的状态变量-->
<c:forEach var='p' items='${persons}' varStatus="idx">
	第${idx.index + 1}位 <br/>
	姓名：${p.name} 性别：${p.sex} 年龄：${p.age}
</c:forEach>

代码：

package com.test.jstl;


public class Company {
	private String cname;
	private String url;
	
	public Company(String cname, String url) {
		this.cname = cname;
		this.url = url;
	}
	
	public String getCname() {
		return cname;
	}
	public void setCname(String cname) {
		this.cname = cname;
	}
	public String getUrl() {
		return url;
	}
	public void setUrl(String url) {
		this.url = url;
	}
}


package com.test.jstl;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;


/**
 * Servlet implementation class JstlServlet
 */
@WebServlet("/jstl")
public class JstlServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public JstlServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		List list = new ArrayList();
		list.add(new Company("腾讯", "www.tencent.com"));
		list.add(new Company("百度", "www.baidu.com"));
		list.add(new Company("CSDN", "www.csdn.net"));
		request.setAttribute("companies", list);
		request.getRequestDispatcher("/core.jsp").forward(request, response);
	}

}


<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!-- 在Java或JSP中输入ALT + / 可出现智能提示 -->
<%@ taglib  uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- forEach标签用于遍历
		List companies = (List)request.getAttribute("companies");
		for (Company c : companies){
			out.print("...");
		}
	 -->
	<c:forEach items = "${requestScope.companies }" var = "c" varStatus = "idx">
		<h2 style="color:blue">${idx.index + 1}: ${c.cname }-${c.url }</h2>
	</c:forEach>
</body>
</html>

alt

5. fmt格式化标签库

  • fmt格式化标签库 URI：http://java.sun.com/jsp/jstl/fmt
    <fmt:formatDate value=”” pattern=””> 格式化日期标签
formatDate pattern 作用
yyyy 四位年
MM 两位月
dd 两位日
HH 24小时制
hh 12小时制
mm 分钟
ss 秒数
SSS 毫秒 
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <%
	 	request.setAttribute("amt", 1987654.326);
	 	request.setAttribute("now", new java.util.Date());
	 	request.setAttribute("html", "<a href='index.html>index</a>");
	 	request.setAttribute("nothing", null);
	 %>
	 
	 <h2>${now }</h2>
	 <!-- formatDate pattern
	 	yyyy - 四位年
	 	MM  - 两位月
	 	dd  - 两位日
	 	HH  - 24小时制
	 	hh  - 12小时制
	 	mm  - 分钟
	 	ss  - 秒数
	 	SSS - 毫秒
	  -->
	  <h2>
	  	 <fmt:formatDate value="${requestScope.now }" pattern="yyyy年MM月dd日HH时mm分钟ss秒SSS毫秒" />
	  </h2>
</body>
</html>

alt

<fmt:formatNumber value=”” pattern=””> 格式化数字标签

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	 <%
	 	request.setAttribute("amt", 1987654.326);
	 	request.setAttribute("html", "<a href='index.html'>index</a>");
	 	request.setAttribute("nothing", null);
	 %>
	 
	  
	  <h2>${amt }</h2>
	  <h2>
	  <!-- 0.00表示保留两位小数 -->
	  	<fmt:formatNumber value="${amt }" pattern="0.00"></fmt:formatNumber>
	  </h2>
	  
	  <!-- 如果我们要求这是人民币，并且三位一分割 -->
	  <h2>￥<fmt:formatNumber value="${amt }" pattern="0,000.00"></fmt:formatNumber>元</h2>
	  
	  <!-- EL表达式中对于NULL是不显示的，现在我们想让他输出“无” -->
	  <h2>null默认值：<c:out value="${nothing }" default="无"></c:out></h2>
	  
	  <!-- 转义 -->
	  <h2>${html }</h2>
	  <h2><c:out value="${html }" escapeXml="true"></c:out></h2>
	  
</body>
</html>

alt

三、 综合案例：

开发一个员工信息表。
alt

Employee.java

package com.test.employee;


public class Employee {
	private Integer empno;
	private String ename;
	private String department;
	private String job;
	private Float salary;
	
	public Employee(Integer empno, String ename, String department, String job, Float salary) {
		super();
		this.empno = empno;
		this.ename = ename;
		this.department = department;
		this.job = job;
		this.salary = salary;
	}
	
	public Integer getEmpno() {
		return empno;
	}
	public void setEmpno(Integer empno) {
		this.empno = empno;
	}
	public String getEname() {
		return ename;
	}
	public void setEname(String ename) {
		this.ename = ename;
	}
	public String getDepartment() {
		return department;
	}
	public void setDepartment(String department) {
		this.department = department;
	}
	public String getJob() {
		return job;
	}
	public void setJob(String job) {
		this.job = job;
	}
	public Float getSalary() {
		return salary;
	}
	public void setSalary(Float salary) {
		this.salary = salary;
	}
	

	
}

ListServlet.java

package com.test.employee;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class ListServlet
 */
@WebServlet("/list")
public class ListServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public ListServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		ServletContext context = request.getServletContext();
		if (context.getAttribute("employees") == null) {
			List list = new ArrayList();
			Employee emp = new Employee(7731, "张三", "市场部", "客户代表", 10000f);
			list.add(emp);
			list.add(new Employee(8871, "李四", "研发部", "运维工程师",8500f ));
			
			context.setAttribute("employees", list);
		}
		request.getRequestDispatcher("/employee.jsp").forward(request, response);
	}

}

CreateServlet.java

package com.test.employee;

import java.io.IOException;
import java.util.List;

import javax.servlet.ServletContext;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class CreateServlet
 */
@WebServlet("/create")
public class CreateServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public CreateServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String empno = request.getParameter("empno");
		String ename = request.getParameter("ename");
		String department = request.getParameter("department");
		String job = request.getParameter("job");
		String salary = request.getParameter("salary");
		
		System.out.println(empno);
		Employee emp = new Employee(Integer.parseInt(empno) , ename , department , job , Float.parseFloat(salary));
		ServletContext context = request.getServletContext();
		List employees = (List)context.getAttribute("employees");
		employees.add(emp);
		context.setAttribute("employees", employees);
		request.getRequestDispatcher("/employee.jsp").forward(request, response);
	}

}

employee.jsp

<%@ page contentType="text/html;charset=utf-8"%>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "c" %>
<%@ taglib uri = "http://java.sun.com/jsp/jstl/fmt" prefix = "fmt" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>员工列表</title>
    <link href="css/bootstrap.css" type="text/css" rel="stylesheet"></link>
    
    <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>

    <style type="text/css">
        .pagination {
            margin: 0px
        }

        .pagination > li > a, .pagination > li > span {
            margin: 0 5px;
            border: 1px solid #dddddd;
        }

        .glyphicon {
            margin-right: 3px;
        }

        .form-control[readonly] {
            cursor: pointer;
            background-color: white;
        }
        #dlgPhoto .modal-body{
            text-align: center;
        }
        .preview{

            max-width: 500px;
        }
    </style>
    <script>
        $(function () {
            
            $("#btnAdd").click(function () {
                $('#dlgForm').modal()
            });
        })


    </script>
</head>
<body>

<div class="container">
    <div class="row">
        <h1 style="text-align: center">员工信息表</h1>
        <div class="panel panel-default">
            <div class="clearfix panel-heading ">
                <div class="input-group" style="width: 500px;">
                    <button class="btn btn-primary" id="btnAdd"><span class="glyphicon glyphicon-zoom-in"></span>新增
                    </button>
                </div>
            </div>

            <table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>员工编号</th>
                    <th>姓名</th>
                    <th>部门</th>
                    <th>职务</th>
                    <th>工资</th>
                    <th>&nbsp;</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items = "${applicationScope.employees}" var = "emp" varStatus="idx" >
                <tr>
                    <td>${idx.index + 1}</td>
                    <td>${emp.empno }</td>
                    <td>${emp.ename }</td>
                    <td>${emp.department }</td>
                    <td>${emp.job }</td>
                    <td style="color: red;font-weight: bold">￥<fmt:formatNumber value = "${emp.salary }" pattern="0,000.00" ></fmt:formatNumber></td>
                </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- 表单 -->
<div class="modal fade" tabindex="-1" role="dialog" id="dlgForm">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增员工</h4>
            </div>
            <div class="modal-body">
                <form action="/employee/create" method="post" >
                    <div class="form-group">
                        <label >员工编号</label>
                        <input type="text" name="empno" class="form-control" id="empno" placeholder="请输入员工编号">
                    </div>
                    <div class="form-group">
                        <label >员工姓名</label>
                        <input type="text" name="ename" class="form-control" id="ename" placeholder="请输入员工姓名">
                    </div>
                    <div class="form-group">
                        <label>部门</label>
                        <select id="dname" name="department" class="form-control">
                            <option selected="selected">请选择部门</option>
                            <option value="市场部">市场部</option>
                            <option value="研发部">研发部</option>
                        	<option value="后勤部">后勤部</option>
                        </select>
                    </div>

                    <div class="form-group">
                        <label>职务</label>
                        <input type="text" name="job" class="form-control" id="sal" placeholder="请输入职务">
                    </div>

                    <div class="form-group">
                        <label >工资</label>
                        <input type="text" name="salary" class="form-control" id="sal" placeholder="请输入工资">
                    </div>

                    <div class="form-group" style="text-align: center;">
                        <button type="submit" class="btn btn-primary">保存</button>
                    </div>
                </form>
            </div>

        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


</body>
</html>

alt

alt

alt

版权声明：本文为Aurorat原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。