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

简介: 本篇章主要介绍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>");

image.gif

1,2 概述及格式

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

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

image.gif编辑

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>

image.gif

image.gif编辑

小结:

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>

image.gif

1,4 JSP作用域回显

JSP展示作用域数据案例:

Servlet

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

image.gif

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>

image.gif

image.gif编辑

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"%>

image.gif

<%@ 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";
}

image.gif

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>

image.gif

1,6 案例代码实现

image.gif编辑

login.jsp

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

image.gif

Demo2Servlet

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

image.gif

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>

image.gif

最后:

       如果文章对您有帮助,就拿起小手赶紧给博主点赞💚评论❤️收藏💙 一下吧!

      愿我们在未来的日子里。熠熠生辉!!!

相关文章
|
2月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
230 4
|
7月前
|
Java 数据库 网络架构
菜鸟之路Day36一一Web开发综合案例(部门管理)
本文详细记录了基于Spring Boot的Web开发综合案例——部门管理功能的实现过程。从环境搭建到功能开发,涵盖数据库表设计、Spring Boot项目创建、依赖引入、配置文件设置以及Mapper、Service、Controller的基础结构构建。文章重点讲解了查询、删除、新增和修改部门信息的业务逻辑实现,遵循RESTful规范设计接口,并通过统一响应结果类`Result`优化前后端交互体验。借助Spring的IoC容器管理与MyBatis的SQL映射,实现了高效的数据操作与业务处理,最终完成部门管理的全功能开发。
227 12
|
6月前
|
XML SQL 前端开发
菜鸟之路Day37一一Web开发综合案例(员工管理)
本文介绍了基于Web开发的员工管理综合案例,涵盖分页查询、条件分页查询、删除员工和新增员工四大功能模块。通过前后端交互,前端传递参数(如页码、每页记录数、查询条件等),后端使用MyBatis与PageHelper插件处理数据查询与操作。代码结构清晰,包括Controller层接收请求、Service层业务逻辑处理以及Mapper层数据访问,并结合XML动态SQL实现灵活的条件查询。此外,新增与删除功能分别通过POST与DELETE请求完成,确保系统功能完整且高效。
199 7
|
6月前
|
存储 前端开发 Java
菜鸟之路Day38一一Web开发综合案例(三)
本文介绍了Web开发中的文件上传与员工信息修改的综合案例,涵盖前端到后端的完整流程。重点讲解了阿里云OSS的集成,包括Bucket创建、密钥获取及SDK使用,并通过Spring Boot实现文件上传功能。同时,详细描述了员工信息查询与修改的操作逻辑,涉及Controller、Service和Mapper层代码实现。最后探讨了配置文件的优化,对比@Value与@ConfigurationProperties注解,展示了如何通过实体类批量注入配置参数,提升代码可维护性与灵活性。
174 1
|
7月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
10月前
|
数据采集 Web App开发 API
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
562 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
|
前端开发 机器人 测试技术
【RF案例】Web自动化测试弹窗处理
在进行Web自动化测试时,常会遇到不同类型的弹窗,如ajax、iframe、新窗口及alert/Confirm等。这些弹窗可通过Selenium进行定位与处理。其中,ajax弹窗直接定位处理;iframe需先选中再操作;新窗口类似iframe处理;而alert/Confirm则需特殊方法应对。在Robot Framework中,需先定义并获取窗口后使用特定关键字处理。此外,还有部分div弹窗需在消失前快速定位。希望本文能帮助大家更好地处理各类弹窗。
322 6
【RF案例】Web自动化测试弹窗处理
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
284 6
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
336 11
|
安全 应用服务中间件 开发工具
Web安全-SVN信息泄露漏洞分析
Web安全-SVN信息泄露漏洞分析
933 2