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)+" "); } 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 案例代码实现
编辑
login.jsp
<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"; }
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>