WEB核心【案例：JSP回显信息】第七章

2022-08-22 194

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 本篇章主要介绍JSP。jsp的概述以及格式，用jsp打印99乘法表，jsp作用域的回显，以及jsp的导包和集合的回显。最后一个案例帮助大家更好的巩固和学习

1，JSP回显信息

1，1 引言

目标：熟练掌握JSP信息回显技术

想要进行题目要求的回显：

使用Servlet拼接字符串是可以实现的

举个例子：一个Servlet程序进行写入页面回显：缺点就是很有缺点基本没人用，写了个示例大家了解一下

public void run1() throws IOException {
    boolean result = true;
    String str = "";
    if(result){
        str = "登录成功";
    }else{
        str = "登录失败";
    }
    PrintWriter w = getResponse().getWriter();
    w.write("<!DOCTYPE html>\n" +
            "<html lang=\"zh-CN\">\n" +
            "\t<head>\n" +
            "\t\t<meta charset=\"utf-8\">\n" +
            "\t\t<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n" +
            "\t\t<meta name=\"viewport\" content=\"width=device-width,initial-scale=1\" />\n" +
            "\t\t<title>传智商城-登录页面</title>\n" +
            "\n" +
            "\t\t<link href=\"css/bootstrap.min.css\" rel=\"stylesheet\">\n" +
            "\t\t<link rel=\"stylesheet\" href=\"css/bootstrap-theme.min.css\" />\n" +
            "\t\t<script src=\"js/jquery-1.11.3.min.js\"></script>\n" +
            "\t\t<script src=\"js/bootstrap.min.js\"></script>\n" +
            "\t</head>\n" +
            "\n" +
            "\t<body>\n" +
            "\t\t<!-- 网站头部  -->\n" +
            "\t\t<div class=\"container\">\n" +
            "\t\t\t<div class=\"row\">\n" +
            "\t\t\t\t<div class=\"col-md-4\">\n" +
            "\t\t\t\t\t<img src=\"img/czxyLogo.png\" />\n" +
            "\t\t\t\t</div>\n" +
            "\t\t\t\t<div class=\"col-md-4\">\n" +
            "\t\t\t\t\t<img src=\"img/header.png\"/> \n" +
            "\t\t\t\t</div>\n" +
            "\t\t\t\t<div class=\"col-md-4\" style=\"padding-top: 20px;\">\n" +
            "\t\t\t\t\t<ul class=\"list-inline\" >\n" +
            "\t\t\t\t\t\t<li><a href=\"login.html\" class=\"btn btn-primary glyphicon glyphicon-user\">登录</a></li>\n" +
            "\t\t\t\t\t\t<li><a href=\"register.html\" class=\"btn btn-danger glyphicon glyphicon-plus\">注册</a></li>\n" +
            "\t\t\t\t\t\t<li><a href=\"cart.html\" class=\"btn btn-primary glyphicon glyphicon-shopping-cart\" onmouseover=\"showCartItem(this)\">购物车<span class=\"badge\">5</span></a></li>\n" +
            "\t\t\t\t\t</ul>\n" +
            "\t\t\t\t</div>\n" +
            "\t\t\t</div>\n" +
            "\t\t</div>\n" +
            "\t\t\n" +
            "\t\t<!-- 头部导航条  -->\n" +
            "\t\t<div class=\"container\">\n" +
            "\t\t\t<div class=\"row\">\n" +
            "\t\t\t\t<div class=\"col-xs-12\">\n" +
            "\t\t\t\t\t<nav class=\"navbar navbar-inverse\">\n" +
            "\t\t\t\t\t  <div class=\"container-fluid\">\n" +
            "\t\t\t\t\t    <div class=\"navbar-header\">\n" +
            "\t\t\t\t\t      <button type=\"button\" class=\"navbar-toggle collapsed\" data-toggle=\"collapse\" data-target=\"#bs-example-navbar-collapse-1\" aria-expanded=\"false\">\n" +
            "\t\t\t\t\t        <span class=\"sr-only\">Toggle navigation</span>\n" +
            "\t\t\t\t\t        <span class=\"icon-bar\"></span>\n" +
            "\t\t\t\t\t        <span class=\"icon-bar\"></span>\n" +
            "\t\t\t\t\t        <span class=\"icon-bar\"></span>\n" +
            "\t\t\t\t\t      </button>\n" +
            "\t\t\t\t\t      <a class=\"navbar-brand\" href=\"index.html\">首页</a>\n" +
            "\t\t\t\t\t    </div>\n" +
            "\t\t\t\t\t\n" +
            "\t\t\t\t\t    <div class=\"collapse navbar-collapse\" id=\"bs-example-navbar-collapse-1\">\n" +
            "\t\t\t\t\t      <ul class=\"nav navbar-nav\">\n" +
            "\t\t\t\t\t        <li class=\"active\"><a href=\"product_list.html\">手机数码<span class=\"sr-only\">(current)</span></a></li>\n" +
            "\t\t\t\t\t        <li><a href=\"#\">电脑办公</a></li>\n" +
            "\t\t\t\t\t        <li><a href=\"#\">家具家居</a></li>\n" +
            "\t\t\t\t\t      </ul>\n" +
            "\t\t\t\t\t      <form class=\"navbar-form navbar-right\" role=\"search\">\n" +
            "\t\t\t\t\t        <div class=\"form-group\">\n" +
            "\t\t\t\t\t          \t<div class=\"input-group\">\n" +
            "      \t\t\t\t\t\t\t\t<input id=\"wordsSearch\" type=\"text\" class=\"form-control\" placeholder=\"Search\" onkeyup=\"searchWords(this)\" onclick=\"showWordsList()\">\n" +
            "      \t\t\t\t\t\t\t\t<div class=\"input-group-addon\" onclick=\"itemulClose()\">×</div>\n" +
            "    \t\t\t\t\t\t\t</div>\n" +
            "\t\t\t\t\t        </div>\n" +
            "\t\t\t\t\t        <button type=\"submit\" class=\"btn btn-default\">Submit</button>\n" +
            "\t\t\t\t\t        <!-- 显示查询信息的div -->\n" +
            "\t\t\t\t\t        <div id=\"completeShow\" style=\"position:absolute;z-index:998;width:200px;\">\n" +
            "\t\t\t\t\t        \t<ul id='itemul' class='list-group'>\n" +
            "\t\t\t\t\t        \t\t<!--\n" +
            "\t\t\t\t\t        \t\t<li class='list-group-item'><a href='#'>查询结果1</a></li>\n" +
            "\t\t\t\t\t        \t\t<li class='list-group-item'><a href='#'>查询结果2</a></li>\n" +
            "\t\t\t\t\t        \t\t<li class='list-group-item'><a href='#'>查询结果3</a></li>\n" +
            "\t\t\t\t\t        \t\t<li class='list-group-item'><a href='#'>查询结果4</a></li>\n" +
            "\t\t\t\t\t        \t\t<li class='list-group-item'><a href='#'>查询结果5</a></li>\n" +
            "\t\t\t\t\t        \t\t-->\n" +
            "\t\t\t\t\t        \t</ul>\n" +
            "\t\t\t\t\t        </div>\n" +
            "\t\t\t\t\t      </form>\n" +
            "\t\t\t\t\t    </div>\n" +
            "\t\t\t\t\t  </div>\n" +
            "\t\t\t\t\t</nav>\n" +
            "\t\t\t\t</div>\n" +
            "\t\t\t\t\n" +
            "\t\t\t</div>\n" +
            "\t\t</div>\n" +
            "\t\t\n" 
            "</html>");

1，2 概述及格式

JSP是Java独有，比HTML更强大。重要:JSP本质是一个Servlet

除了可以展示HTML效果，还可以嵌入Java代码进行编程

编辑

IDEA源码中，可以看到JSP独有内容（包括java代码）

浏览器源码中，看不到JSP独有内容，只能看到htm+css+js

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%
        int a = 10;
        a+=20;
    %>
    <h1>你好<%out.write(""+a);%></h1>
</body>
</html>

编辑

小结：

JSP可以编写java代码，html不行。

1，3 课堂案例

课堂案例：JSP编写九九乘法表

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <h1>九九乘法表</h1>
    <%
        //外层控制行
        for (int i = 1; i <=9 ; i++) {
            //内层控制列
            for (int j = 1; j <=i ; j++) {
                out.write(j+"*"+i+"="+(j*i)+"&nbsp;&nbsp;");
            }
            out.write("<br/>");
        }
    %>
</body>
</html>

1，4 JSP作用域回显

JSP展示作用域数据案例：

Servlet

//需求：访问run2，向request作用域传递 username=小李,请求转发到demo3.jsp
//demo3.jsp上进行username信息回显
public String run2(){
    getRequest().setAttribute("username","小李");
    return "forward:/demo3.jsp";
}

JSP：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    <%-- 相当于：out.write(getRequest().getAttribute("username"))   --%>
    <h1>${username}</h1>
    <%-- 获取不到该键值对，返回空字符串    --%>
    <h1>${xxxx}</h1>
</body>
</html>

编辑

Servlet：getRequest().setAttribute("key","value");

请求转发到JSP

JSP：${key}

如果获取不到该键值对，JSP表达式，返回空字符串

1，5 JSP导包及集合回显

JSP导包和集合数据回显：

<%@ page contentType="text/html;charset=UTF-8" language="java"
         import="java.util.List,java.util.Map,com.czxy.demo1.domain.Person"%>

<%@ page import="包1,包2"%>

Demo1Servlet:

//需求：访问run4，向request作用域传递 List<Person>数据，请求转发到demo4.jsp
//demo4.jsp上进行List<Person>数据回显
public String run4(){
    List<Person> plist = new ArrayList<>();
    Collections.addAll(plist,
            new Person("007","坤哥","20"),
            new Person("008","隆哥","20"),
            new Person("009","骄姐","18")
            );
    getRequest().setAttribute("plist",plist);
    return "forward:/demo4.jsp";
}

Jsp:

<%@ page import="com.czxy.demo1.domain.Person" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
    ${plist}
    <hr/>
    <%
        List<Person> plist = (List<Person>) request.getAttribute("plist");
        for (Person p : plist) {
            out.write(p.getId()+","+p.getName()+","+p.getAge()+"<br/>");
        }
    %>
</body>
</html>

1，6 案例代码实现

编辑

<form class="form-horizontal" method="post" action="/day04_1/d2">
    <input type="hidden" name="method" value="login"/>

Demo2Servlet

public String login(){
    boolean result = true;
    String str = "";
    if(result){
        str = "登录成功";
    }else{
        str = "登录失败";
    }
    getRequest().setAttribute("msg",str);
    return "forward:/login.jsp";
}

<div class="col-xs-11 col-xs-offset-1">
    <b><font size="4" color="#2B669A">会员登录</font> USER LOGIN</b>
    <br/>
    <b><font size="2" color="red">${msg}</font> </b>
</div>