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

最后:

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

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

相关文章
|
13天前
|
数据采集 Web App开发 API
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
53 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
|
5月前
|
安全 应用服务中间件 开发工具
Web安全-SVN信息泄露漏洞分析
Web安全-SVN信息泄露漏洞分析
297 2
|
5月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
111 11
|
5月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
5月前
|
前端开发 机器人 测试技术
【RF案例】Web自动化测试弹窗处理
在进行Web自动化测试时,常会遇到不同类型的弹窗,如ajax、iframe、新窗口及alert/Confirm等。这些弹窗可通过Selenium进行定位与处理。其中,ajax弹窗直接定位处理;iframe需先选中再操作;新窗口类似iframe处理;而alert/Confirm则需特殊方法应对。在Robot Framework中,需先定义并获取窗口后使用特定关键字处理。此外,还有部分div弹窗需在消失前快速定位。希望本文能帮助大家更好地处理各类弹窗。
87 6
【RF案例】Web自动化测试弹窗处理
|
5月前
|
前端开发 数据安全/隐私保护
【前端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;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
5月前
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
|
6月前
|
UED 存储 自然语言处理
【语言无界·体验无疆】解锁Vaadin应用全球化秘籍:从代码到文化,让你的应用畅游世界每一个角落!
【8月更文挑战第31天】《国际化与本地化实战:构建多语言支持的Vaadin应用》详细介绍了如何使用Vaadin框架实现应用的国际化和本地化,提升用户体验和市场竞争力。文章涵盖资源文件的创建与管理、消息绑定与动态加载、日期和数字格式化及文化敏感性处理等方面,通过具体示例代码和最佳实践,帮助开发者构建适应不同语言和地区设置的Vaadin应用。通过这些步骤,您的应用将更加灵活,满足全球用户需求。
86 0
|
6月前
|
API 数据库 UED
全面解析构建高性能API的秘诀:运用Entity Framework Core与异步编程提升Web应用响应速度及并发处理能力的详细指南与实践案例
【8月更文挑战第31天】本文详细介绍了如何利用 Entity Framework Core (EF Core)的异步编程特性构建高性能 API。通过创建基于 EF Core 的 .NET Core Web API 项目,配置数据库上下文,并定义领域模型,文章展示了如何使用异步方法进行数据查询、加载相关实体及事务处理。具体代码示例涵盖了 GET、POST、PUT 和 DELETE 操作,全面展示了 EF Core 异步编程的优势,有助于提升 API 的响应速度和处理能力。
77 0
|
6月前
|
数据库 开发者 数据库管理
【惊艳登场】Bottle框架凭什么成为Web开发新宠儿?一个实战案例告诉你背后的秘密!
【8月更文挑战第31天】Bottle是一个简洁高效的Web框架,适用于构建轻量级应用。本文通过开发一个在线笔记应用,展示了Bottle的核心特性和优势。从环境搭建、路由设置到数据库操作,详细介绍了用户注册、登录、笔记创建及管理等功能的实现过程。通过简洁的语法和灵活的路由机制,Bottle让开发者能快速构建功能完备的应用,提升开发效率。
72 0

热门文章

最新文章