时间:2023-09-26 04:36:01 | 来源:网站运营
时间:2023-09-26 04:36:01 来源:网站运营
大数据从入门到深入:JavaEE 之 动态网页开发基础 JSP的数据交互(2):<%@ 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> <div> <form action="b.jsp" method="get"> 年轻的挑战者呀,请留下你的大名 : <input type="text" name="userName" /> <button type="submit">提交到服务器</button> </form> </div></body></html>
b.jsp接收这个内容展示即可<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% // 获取a.jsp提交的数据 String userName = request.getParameter("userName"); out.print("欢迎你," + userName + ",欢迎来到JSP的世界;");%>
此处需要注意的就是在接收页面数据的时候 需要根据页面 form表单中封装的 input标签的 name值来进行接收<%@ 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> <div> <form action="b.jsp" method="get"> <p> 年轻的挑战者呀,请留下你的大名 : <input type="text" name="userName" /> </p> <p> 年轻的挑战者呀,请选择你的特征 : <br /> <input type="checkbox" name="tedian" value="好看" />好看<br /> <input type="checkbox" name="tedian" value="年轻" />年轻<br /> <input type="checkbox" name="tedian" value="善良" />善良<br /> <input type="checkbox" name="tedian" value="有钱" />有钱<br /> </p> <p> <button type="submit">提交到服务器</button> </p> </form> </div></body></html>
效果:<%@page import="java.util.Arrays"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% // 设置请求流编码 request.setCharacterEncoding("UTF-8"); // 接收单个name标签的值 String userName = request.getParameter("userName"); // 接收一堆 name相同的复选框的值 String[] tedians = request.getParameterValues("tedian"); out.print("欢迎您" + userName + "欢迎来到JSP的世界!<br />"); out.print("你居然是一个<strong>"+Arrays.toString(tedians)+"</strong>的人");%>
此处注意,以为是多个name,一个用String变量,多个就需要用String[] 接收了;<%@ 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> <div> <form action="login_server.jsp" method="post"> <p> 请输入您的用户名 : <input type="text" name="userName" /> </p> <p> <button type="submit">确定登录</button> </p> </form> </div></body></html>
2. 创建login_server.jsp页面<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% // 模拟数据库定义两组人 // 普通用户 String[] losers = {"赵文明","孙建国","王小花","李建军"}; // VIP用户 String[] vips = {"汤姆","杰瑞"}; // 设定编码 request.setCharacterEncoding("UTF-8"); // 接收页面请求 String userName = request.getParameter("userName"); // 定义最终的展示结果页 String result = "error.jsp"; //默认错误页 // 判断是不是普通用户 for(String a:losers){ if(userName.equals(a)){ result = "loser.jsp"; break; } } // 判断是不是VIP用户 for(String b:vips){ if(userName.equals(b)){ result = "vip.jsp"; break; } } // 根据业务结果转发到对应页面 request.getRequestDispatcher(result).forward(request, response);%>
此处调用就是request对象的getRequestDispatcher方法,这个方法有一个参数是用来设定将请求发送的地址,页面发起请求先由统一的一个服务页面接收,然后根据业务不同再转发给其他页面进行操作; <%@ 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> <div> 欢迎,<%=request.getParameter("userName") %> </div> <marquee behavior="alternate" scrollamount="20" onMouseOut="this.start()" onMouseOver="this.stop()"> <h1 style="color: red;font-size: 100px;"> 请赶紧充钱成为VIP用户 </h1> </marquee></body></html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html><html ><head> <meta charset="UTF-8"> <title>炫酷炸天VIP登录</title> <style type="text/css">html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}</style> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Concert+One); h1 { animation:glow 10s ease-in-out infinite; /* For less laggy effect, uncomment this: animation:none; -webkit-text-stroke:1px #fff; =========== */ } * { box-sizing:border-box; } body { background:#0a0a0a; overflow:hidden; text-align:center; } figure { animation:wobble 5s ease-in-out infinite; transform-origin:center center; transform-style:preserve-3d; } @keyframes wobble { 0%,100%{ transform:rotate3d(1,1,0,40deg); } 25%{ transform:rotate3d(-1,1,0,40deg); } 50%{ transform:rotate3d(-1,-1,0,40deg); } 75%{ transform:rotate3d(1,-1,0,40deg); } } h1 { display:block; width:100%; padding:40px; line-height:1.5; font:900 8em 'Concert One', sans-serif; text-transform:uppercase; position:absolute; color:#0a0a0a; } @keyframes glow { 0%,100%{ text-shadow:0 0 30px red; } 25%{ text-shadow:0 0 30px orange; } 50%{ text-shadow:0 0 30px forestgreen; } 75%{ text-shadow:0 0 30px cyan; } } h1:nth-child(2){ transform:translateZ(5px); } h1:nth-child(3){ transform:translateZ(10px);} h1:nth-child(4){ transform:translateZ(15px); } h1:nth-child(5){ transform:translateZ(20px); } h1:nth-child(6){ transform:translateZ(25px); } h1:nth-child(7){ transform:translateZ(30px); } h1:nth-child(8){ transform:translateZ(35px); } h1:nth-child(9){ transform:translateZ(40px); } h1:nth-child(10){ transform:translateZ(45px); } </style></head><body> <figure> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1> <h1>尊贵的VIP会员<br /><%=request.getParameter("userName") %> <br />欢迎您</h1></figure></body></html>
这里大家要考虑一个问题,不管是哪个展示页面其实地址栏中的地址始终停留在开始被请 求的login_server.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> <div> <h1>欢迎使用人员信息管理系统</h1> <h2>请选择一个功能吧!</h2> <ol> <li> <a href="page2.jsp" target="_blank">查询全部人员信息</a> </li> </ol> </div></body></html>
效果 : <%@page import="java.util.List"%><%@page import="com.hnxy.db.Person"%><%@page import="org.apache.commons.dbutils.handlers.BeanListHandler"%><%@page import="com.hnxy.db.JdbcUtil"%><%@page import="org.apache.commons.dbutils.QueryRunner"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% // 获取数据 // 编写SQL语句 String sql = "select * from person"; // 创建SQL执行对象 QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource()); // 占位符赋值 // 执行 List<Person> persons = qr.query(sql,new BeanListHandler<Person>(Person.class)); // 保存数据 request.setAttribute("list", persons); // 转发 request.getRequestDispatcher("page3.jsp").forward(request, response);%>
需要留意page2.jsp调用了一个request.setAttribute(key, val); 的方法 将我们自己的list集合 用 名称 persons 保存在了request对象中,<%@ page language="java" 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>转发案例</title></head><body> <div> <h1>展示人员信息</h1> <table border="1"> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>籍贯</th> </tr> <c:forEach var="p" items="${list}"> <tr> <td>${p.id}</td> <td>${p.name}</td> <td>${p.sex}</td> <td>${p.age}</td> <td>${p.from}</td> </tr> </c:forEach> </table> </div></body></html>
大家 注意下这个数据的展示页面,完全没有java代码,但是还能展示出来数据先写个简单点的,比如你想获取你的web项目的项目名,也就是绝对定位到你的项目下,你可以这么写${pageContext.request.contextPath}它又什么用呢?以后我们向项目中引入CSS JS 的时候会用它这里我们要记住它的写法获取单个变量 : // 在Servlet或JSP中保存数据request.setAttribute("username", "admin");// 在JSP中访问数据姓名: ${username}如果获取对象属性 : // 在Servlet或JSP中保存数据request.setAttribute("p", person);// 在JSP中访问数据人员编号: ${p.id} 人员名称 : ${p.name} .......获取集合对象List : // 在Servlet或JSP中保存数据List names = new ArrayList();names.add(0, "LiYang");names.add(1,"WangHua");request.setAttribute("names",names);// 在JSP中访问数据姓名:${ names[0] }<br/>姓名:${ names[1] }<br/>注意 : 此处是用 变量[索引] 的方式获取集合中元素的值Map :// 在Servlet或JSP中保存数据Map names = new HashMap();names.put("one", "LiYang");names.put("two", "WangHua");request.setAttribute("names", names);// 在JSP中访问数据姓名:${ names.one }<br/>姓名:${ names["two"] }<br/>注意 : 其实获取map值只是把索引换成key而已
4) EL表达式的基本操作符 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" p refix="c" %>
4) JSTL的常用标签 <div> <h1>set 和 out 标签展示</h1> <!‐‐ set保存一个值 ‐‐> <c:set var="msg" value="hello,jstl!" /> <!‐‐ out取值 ‐‐> out 标签 :<h2><c:out value="${msg}" /></h2> <!‐‐ 直接取值也可以 ‐‐> 直接取值 :<h2>${msg}</h2></div>
效果 : <div> <h1>set 和 out 标签展示</h1> <!‐‐ set保存一个值 ‐‐> <c:set var="msg" value="hello,jstl!" /> <!‐‐ 删除 ‐‐> <c:remove var="msg"/> <!‐‐ out取值 ‐‐> out 标签 :<h2><c:out value="${msg}" /></h2> <!‐‐ 直接取值也可以 ‐‐> 直接取值 :<h2>${msg}</h2> </div>
效果 : <div> <!‐‐ 比如保存一个数字 ‐‐> <c:set var="num" value="10" /> <h1>if标签举例</h1> <h2>输入数字为:${num}</h2> <c:if test="${num%2==0}"> <h2>判断结果 : 偶数</h2> </c:if> <c:if test="${num%2!=0}"> <h2>判断结果 :基数</h2> </c:if> </div>
效果 : <div> <!‐‐ 比如保存一个数字 ‐‐> <c:set var="num" value="10" /> <h1>choose标签举例</h1> <h2>输入数字为:${num}</h2> <c:choose> <c:when test="${num%2==0}"> <h2>判断结果 : 偶数</h2> </c:when> <c:otherwise> <h2>判断结果 :基数</h2> </c:otherwise> </c:choose> </div>
效果:<div> <h1>forEach编辑集合元素</h1> <% List<String> list = new ArrayList<String>(); list.add("A"); list.add("B"); list.add("C"); // 保存到request中 request.setAttribute("list", list); %> <!‐‐ 遍历集合 ‐‐> <c:forEach var="s" items="${list}" varStatus="sta"> <p>第${sta.index+1}次循环 : 集合元素为 : ${s}</p> </c:forEach> </div>
效果 : <!‐‐ 按次数遍历 ‐‐> <c:forEach var="i" begin="1" end="10"> ${i} </c:forEach>
结果 : <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
举例说明 : 1. 数字格式化成 钱 的格式展示 <div> <h1>格式化标签使用 : </h1> <c:set var="money" value="123.456" /> <p>没有格式化数字 : ${money}</p> <p>已经格式化数字 : <fmt:formatNumber type="currency" value="${money}" /> </p> </div>
效果: <div> <h1>格式化标签使用 : </h1> <% Date date = new Date(); %> <c:set var="now" value="<%=date %>" /> <p>正常时间 : ${now}</p> <p>格式化好之后的时间:<fmt:formatDate value="${now}" pattern="yyyy-MM-dd"/></p> <p>格式化好之后的时间:<fmt:formatDate value="${now}" pattern="yyyy年MM月dd日"/></p> <c:set var="money" value="123.456" /> <p>没有格式化数字 : ${money}</p> <p>已经格式化数字 : <fmt:formatNumber type="currency" value="${money}" /> </p> </div>
效果:<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% // 模拟数据库定义两组人 // 普通用户 String[] losers = {"赵文明","孙建国","王小花","李建军"}; // VIP用户 String[] vips = {"汤姆","杰瑞"}; // 设定编码 request.setCharacterEncoding("UTF-8"); // 接收页面请求 String userName = request.getParameter("userName"); // 定义最终的展示结果页 String result = "error.jsp"; //默认错误页 // 判断是不是普通用户 for(String a:losers){ if(userName.equals(a)){ result = "loser.jsp"; break; } } // 判断是不是VIP用户 for(String b:vips){ if(userName.equals(b)){ result = "vip.jsp"; break; } } // 根据业务结果转发到对应页面 // request.getRequestDispatcher(result).forward(request, response); // 重定向到结果页面 response.sendRedirect(result);%>
效果关键词:数据,基础,交互,动态,入门,深入