JavaWeb基础——Jsp

本文详细介绍JSP的基本概念、语法及应用场景,包括JSP模板元素、脚本表达式、声明、指令等内容,并通过实例讲解JSP如何与JavaBean交互,以及EL表达式和JSTL标签的使用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、什么是JSP
这里写图片描述

<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Jsp入门(输出时间)</title>
</head>
<body>
    当前时间值是:
    <%
        Date date=new Date();
    //  out.write(date.toLocaleString());//输出方式
        String time=date.toLocaleString();
    %>
    <%=time %><!-- 脚本表达式,它的作用是就是用于向浏览器输出数据 -->

</body>
</html>

这里写图片描述
2、Jsp语法
这里写图片描述
2.1 Jsp模板元素
这里写图片描述
2.2 Jsp脚本表达式
这里写图片描述
2.3 脚本片断
这里写图片描述
这里写图片描述
这里写图片描述

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>脚本片段</title>
</head>
<body>
    <%
        int x=1;
    %>
    aaaaa
    <%
        out.print(x);
    %>
</body>
</html>

2.4 Jsp声明
这里写图片描述

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jsp声明</title>
</head>
<body>

    <%-- <%
        public void run(){

        }
    %> 这种方法本来不支持,相当于方法里面再定义方法--%>

    <%!
        public void run(){

    }
    %><!-- 这样就可以了,它会被翻译成在方法外面定义一个方法 -->

</body>
</html>

2.5 Jsp指令
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

include指令

head.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
jsp头<br/>

foot.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
jsp脚<br/>

静态包含

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>include指令(编译时包含,静态包含,它包含的所有jsp会编译成一个servlet,尽量用它,运行性能好)</title>
</head>
<body>
    <%@ include file="/public/head.jsp" %>
        aaaaa<br/>
    <%@ include file="/public/foot.jsp" %>
</body>
</html>

动态包含

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动态包含(运行主页面的时候才将副页面加载进去,同时也会被翻译成3个servlet,运行时包含)</title>
</head>
<body>
    <%
        request.getRequestDispatcher("/public/head.jsp").include(request, response);
    %>
    aaaaaa
    <%
        request.getRequestDispatcher("/public/foot.jsp").include(request, response);
    %>
</body>
</html>

2.6 Jsp运行原理和九大隐式对象
这里写图片描述
九大隐式对象
这里写图片描述
这里写图片描述
这里写图片描述

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
</head>
<body>
    aaaaaaa <%--会翻译成out输出,所以它也会缓冲,即在wowowow后面输出 --%>
    <%
        out.write("ahhaha");//后输出这个,因为这个要先输入到缓冲,然后再输到response
        response.getWriter().write("wowowow");//先输出这个,所以这两个输出对象不要同时用
    %>
</body>
</html>

这里写图片描述
这里写图片描述
这里写图片描述
这里写图片描述

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>pageContext对象访问其他域</title>
</head>
<body>
    <%
        request.setAttribute("data", "aaa");
        String data=(String)pageContext.getAttribute("data",PageContext.REQUEST_SCOPE);
        out.write(data);
    %>
    <%--    pageContext.findAttribute("data");--%>//在page request  session  application这些域中找data,若找到了就返回该属性的值
    el表达式
    ${data }//相当于pageContext.findAttribute("data");
</body>
</html>
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jsp常用标签</title>
</head>
<body>
    <%--jsp转发 --%>
    <jsp:forward page="/index.jsp"></jsp:forward>

    <%--jsp动态包含,相当于pageContext.inclue() --%>
    <jsp:include page="/1.jsp"></jsp:include>


</body>
</html>

jsp带数据

Servlet9

package cn.itcast.web;

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 Servlet9
 */
@WebServlet("/Servlet9")
public class Servlet9 extends HttpServlet {
    private static final long serialVersionUID = 1L;

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String username=request.getParameter("name");
        System.out.println(username);
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jsp带数据</title>
</head>
<body>
    <jsp:forward page="Servlet9">
    <jsp:param name="username" value="servlet"/>
    </jsp:forward>
</body>
</html>

2.7 el表达式
这里写图片描述

Person.java

package cn.itcast.domain;

import java.util.Date;

public class Person {
    private String name="aaa";
    private int age;
    private Date birthday;
    private Address address;
    public Person() {
        super();
        // TODO Auto-generated constructor stub
    }
    public Person(String name) {
        super();
        this.name = name;
    }
    public Address getAddress() {
        return address;
    }
    public void setAddress(Address address) {
        this.address = address;
    }
    public String getName() {
        return name;
    }
    public Date getBirthday() {
        return birthday;
    }
    public void setBirthday(Date birthday) {
        this.birthday = birthday;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getAge() {
        return age;
    }
    public void setAge(int age) {
        this.age = age;
    }

}

Address.java

package cn.itcast.domain;

public class Address {
    private String city;

    public String getCity() {
        return city;
    }

    public void setCity(String city) {
        this.city = city;
    }

}
<%@ page language="java" import="java.util.*" import="cn.itcast.domain.Person" import="cn.itcast.domain.Address" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>el表达式</title>
</head>
<body>
<!--第一种方式
<%--    <%
        String data="abcd";
        request.setAttribute("data", data);
    %>
    ${data}<%--相当于pageContext.findAttribute("data") --%>
    <br/>
 -->

 <!--第二种方式  
<%--    <%
        Person p=new Person();
        p.setName("aaaa");
        request.setAttribute("person", p);
    %>  --%>
    ${person.name}
-->

 <!--第三种方式数据存在对象中  -->
    <%-- <%
        Person p1=new Person();
        Address a=new Address();
        a.setCity("上海");
        p1.setAddress(a);
        request.setAttribute("p2",p1);
    %>
    ${p2.address.city } --%>

    <%--第四种方式:数据存在列表中 <%
        List list=new ArrayList();
        list.add(new Person("aaa"));
        list.add(new Person("bbb"));
        list.add(new Person("ccc"));

        request.setAttribute("list", list);
    %>  
    ${list[1].name } --%>

    <%--第五种方式:数据存在map集合中 <%
        Map map=new HashMap();
        map.put("aa", new Person("aaaaaaa"));
        map.put("bb", new Person("bbbbbbb"));
        map.put("cc", new Person("ccccccc"));
        map.put("111", new Person("ccccccc"));

        request.setAttribute("map", map);
    %>  
    ${map.bb.name } 
    ${map['111'].name }
    --%>    <%--用el表达式在取数据时,通常用.号,.号取不出来时,用[] --%>

    ${pageContext.request.contextPath }<%--返回当前应用:/day3  --%>
</body>
</html>

2.8 Jsp标签的使用
这里写图片描述
这里写图片描述
这里写图片描述

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jsp:usebean标签的使用</title>
</head>
<body>
    <%--首先从page域里面找有没有person这个bean,如果有则直接返回person bean,如果没有就会实例化一个cn.itcast.domain.Person bean
    并以person为关键字存在page域中 --%>
    <jsp:useBean id="person" class="cn.itcast.domain.Person" scope="page">
        bbbb    <%--userbean标签的标签体只在userbean标签实例化bean时才执行 --%>
    </jsp:useBean>
    <%=person.getName() %>

</body>
</html>
<%@ page language="java" import="java.util.Date;"contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jsp:setProperty</title>
</head>
<body>
    <jsp:useBean id="person" class="cn.itcast.domain.Person"/>

    <jsp:setProperty property="name" name="person" value="xxx"/><%--修改person的name属性为xxx --%>

    <%=person.getName() %><%--结果为xxx --%>

    <%--用请求参数给bean的属性赋值,http://localhost:8080/day3/JspProperty.jsp?name=uuuuu&age=12 --%>
    <jsp:setProperty name="person" property="name" param="name"/>
    <jsp:setProperty name="person" property="age" param="age"/><%--支持8种基本数据类型的转换,因为我们这儿的age=12是一个字符串,但是bean要的是一个整数 --%>
    <%=person.getName() %><%--结果为uuuuu --%>
    <%=person.getAge() %><%--结果为12 --%>

    <%--http://localhost:8080/day3/JspProperty.jsp?name=uuuuu&age=12&birthday=1989-09-09 --%>
    <jsp:setProperty name="person" property="name" value="<%=new Date() %>"/>
    <%=person.getBirthday() %>



    <%--用所有的请求参数为bean赋值 --%>
    <%--http://localhost:8080/day3/JspProperty.jsp?name=uuuuu&age=12 --%>
    <jsp:setProperty name="person" property="*"/>
    <%=person.getName() %><%--结果为uuuuu --%>
    <%=person.getAge() %><%--结果为12 --%>

    <jsp:getProperty property="name" name="person"/><%--结果为uuuuu --%>
    <jsp:getProperty property="name" name="person"/><%--结果为12 --%>
</body>
</html>

2.9 Jstl+el表达式进行迭代
这里写图片描述

<%@ page language="java" import="java.util.*" import="cn.itcast.domain.Person" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使用jstl+el完成集合迭代</title>
</head>
<body>
    <%--列表迭代取数据 <%
        List list=new ArrayList();
        list.add(new Person("aaa"));
        list.add(new Person("bbb"));
        list.add(new Person("ccc"));

        request.setAttribute("list", list);
    %>  
    <c:forEach var="person" items="${list }">
        ${person.name }<br/>
    </c:forEach>
    <!-- 结果
    aaa
    bbb
    ccc
     --> --%>


     <!--Map集合迭代取数据 -->
     <%
        Map map=new HashMap();
        map.put("aa", new Person("aaaaaaa"));
        map.put("bb", new Person("bbbbbbb"));
        map.put("cc", new Person("ccccccc"));
        map.put("111", new Person("ccccccc"));

        request.setAttribute("map", map);
     %>
     <c:forEach var="entry" items="${map }">
        ${entry.key }:${entry.value.name }
     </c:forEach>
     <!-- 结果
    aa:aaaaaaa bb:bbbbbbb cc:ccccccc 111:ccccccc 
     --> 
</body>
</html>

2.9 一个计算器的应用

CalculatorBean.java

package cn.itcast.Calculator;

import java.math.BigDecimal;

//封装计算器数据的bean
public class CalculatorBean {
    private String firstNum="0";
    private char operator='+';
    private String secondNum="0";
    private String result;
    public String getFirstNum() {
        return firstNum;
    }
    public void setFirstNum(String firstNum) {
        this.firstNum = firstNum;
    }
    public char getOperator() {
        return operator;
    }
    public void setOperator(char operator) {
        this.operator = operator;
    }
    public String getSecondNum() {
        return secondNum;
    }
    public void setSecondNum(String secondNum) {
        this.secondNum = secondNum;
    }
    public String getResult() {
        return result;
    }
    public void setResult(String result) {
        this.result = result;
    }
    public void calculate() {
        BigDecimal first=new BigDecimal(this.firstNum);
        BigDecimal second=new BigDecimal(this.secondNum);
        switch(this.operator) {
            case'+':{
                this.result=first.add(second).toString();
                break;
            }
            case'-':{
                this.result=first.subtract(second).toString();          
                break;
            }
            case'*':{
                this.result=first.multiply(second).toString();
                break;
            }
            case'/':{
                if(second.doubleValue()==0) {
                    throw new RuntimeException("被除数不能为0");
                }
                this.result=first.divide(second, 20, BigDecimal.ROUND_HALF_UP).toString();
                break;
            }
            default:
                throw new RuntimeException("运算符只能是:+-*/");
        }
    }

}

calculator.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计算器</title>
</head>
<body style="text-align:center;">

    <jsp:useBean id="calculatorBean" class="cn.itcast.Calculator.CalculatorBean"/>
    <jsp:setProperty property="*" name="calculatorBean"/>
    <%
        try{
            calculatorBean.calculate(); 
        }catch(Exception e){
            out.write(e.getMessage());
        }

    %>
    <br/>--------------------------------------<br/>
    计算结果是:
    <jsp:getProperty property="firstNum" name="calculatorBean"/>
    <jsp:getProperty property="operator" name="calculatorBean"/>
    <jsp:getProperty property="secondNum" name="calculatorBean"/>
    =
    <jsp:getProperty property="result" name="calculatorBean"/>
    <br/>---------------------------------------<br/>


    <form action="calculator.jsp" method="post">
    <table width="40%" border="1">
        <tr>
            <td colspan="2">简单的计算器</td>
        </tr>

        <tr>
            <td>第一个参数:</td>
            <td>
                <input type="text" name="firstNum"/>
            </td>
        </tr>

        <tr>
            <td>操作符</td>
            <td>
                <select name="operator">
                    <option value="+">+</option>
                    <option value="-">-</option>
                    <option value="*">*</option>
                    <option value="/">/</option>
                </select>
            </td>
        </tr>

        <tr>
            <td>第二个参数:</td>
            <td>
                <input type="text" name="secondNum"/>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="submit" value="计算"/>
            </td>
        </tr>

    </table>
    </form>
</body>
</html>

这里写图片描述
2.10 Jsp页面错误
这里写图片描述

其他(css里面的一些定位技巧)

浮动
这里写图片描述
这里写图片描述

相对定位
这里写图片描述
这里写图片描述

绝对定位
这里写图片描述
这里写图片描述
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值