時(shí)間:2023-09-26 04:36:01 | 來(lái)源:網(wǎng)站運(yùn)營(yíng)
時(shí)間:2023-09-26 04:36:01 來(lái)源:網(wǎng)站運(yùn)營(yíng)
大數(shù)據(jù)從入門(mén)到深入:JavaEE 之 動(dòng)態(tài)網(wǎng)頁(yè)開(kāi)發(fā)基礎(chǔ) JSP的數(shù)據(jù)交互(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>數(shù)據(jù)發(fā)送</title></head><body> <div> <form action="b.jsp" method="get"> 年輕的挑戰(zhàn)者呀,請(qǐng)留下你的大名 : <input type="text" name="userName" /> <button type="submit">提交到服務(wù)器</button> </form> </div></body></html>
b.jsp接收這個(gè)內(nèi)容展示即可<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% // 獲取a.jsp提交的數(shù)據(jù) String userName = request.getParameter("userName"); out.print("歡迎你," + userName + ",歡迎來(lái)到JSP的世界;");%>
此處需要注意的就是在接收頁(yè)面數(shù)據(jù)的時(shí)候 需要根據(jù)頁(yè)面 form表單中封裝的 input標(biāo)簽的 name值來(lái)進(jìn)行接收<%@ 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>數(shù)據(jù)發(fā)送</title></head><body> <div> <form action="b.jsp" method="get"> <p> 年輕的挑戰(zhàn)者呀,請(qǐng)留下你的大名 : <input type="text" name="userName" /> </p> <p> 年輕的挑戰(zhàn)者呀,請(qǐng)選擇你的特征 : <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="有錢(qián)" />有錢(qián)<br /> </p> <p> <button type="submit">提交到服務(wù)器</button> </p> </form> </div></body></html>
效果:<%@page import="java.util.Arrays"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% // 設(shè)置請(qǐng)求流編碼 request.setCharacterEncoding("UTF-8"); // 接收單個(gè)name標(biāo)簽的值 String userName = request.getParameter("userName"); // 接收一堆 name相同的復(fù)選框的值 String[] tedians = request.getParameterValues("tedian"); out.print("歡迎您" + userName + "歡迎來(lái)到JSP的世界!<br />"); out.print("你居然是一個(gè)<strong>"+Arrays.toString(tedians)+"</strong>的人");%>
此處注意,以為是多個(gè)name,一個(gè)用String變量,多個(gè)就需要用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>用戶(hù)登錄</title></head><body> <div> <form action="login_server.jsp" method="post"> <p> 請(qǐng)輸入您的用戶(hù)名 : <input type="text" name="userName" /> </p> <p> <button type="submit">確定登錄</button> </p> </form> </div></body></html>
2. 創(chuàng)建login_server.jsp頁(yè)面<%@page import="org.apache.jasper.tagplugins.jstl.core.ForEach"%><%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><% // 模擬數(shù)據(jù)庫(kù)定義兩組人 // 普通用戶(hù) String[] losers = {"趙文明","孫建國(guó)","王小花","李建軍"}; // VIP用戶(hù) String[] vips = {"湯姆","杰瑞"}; // 設(shè)定編碼 request.setCharacterEncoding("UTF-8"); // 接收頁(yè)面請(qǐng)求 String userName = request.getParameter("userName"); // 定義最終的展示結(jié)果頁(yè) String result = "error.jsp"; //默認(rèn)錯(cuò)誤頁(yè) // 判斷是不是普通用戶(hù) for(String a:losers){ if(userName.equals(a)){ result = "loser.jsp"; break; } } // 判斷是不是VIP用戶(hù) for(String b:vips){ if(userName.equals(b)){ result = "vip.jsp"; break; } } // 根據(jù)業(yè)務(wù)結(jié)果轉(zhuǎn)發(fā)到對(duì)應(yīng)頁(yè)面 request.getRequestDispatcher(result).forward(request, response);%>
此處調(diào)用就是request對(duì)象的getRequestDispatcher方法,這個(gè)方法有一個(gè)參數(shù)是用來(lái)設(shè)定將請(qǐng)求發(fā)送的地址,頁(yè)面發(fā)起請(qǐng)求先由統(tǒng)一的一個(gè)服務(wù)頁(yè)面接收,然后根據(jù)業(yè)務(wù)不同再轉(zhuǎn)發(fā)給其他頁(yè)面進(jìn)行操作; <%@ 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>普通用戶(hù)</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;"> 請(qǐng)趕緊充錢(qián)成為VIP用戶(hù) </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會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1> <h1>尊貴的VIP會(huì)員<br /><%=request.getParameter("userName") %> <br />歡迎您</h1></figure></body></html>
這里大家要考慮一個(gè)問(wèn)題,不管是哪個(gè)展示頁(yè)面其實(shí)地址欄中的地址始終停留在開(kāi)始被請(qǐng) 求的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>轉(zhuǎn)發(fā)案例</title></head><body> <div> <h1>歡迎使用人員信息管理系統(tǒng)</h1> <h2>請(qǐng)選擇一個(gè)功能吧!</h2> <ol> <li> <a href="page2.jsp" target="_blank">查詢(xún)?nèi)咳藛T信息</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"%><% // 獲取數(shù)據(jù) // 編寫(xiě)SQL語(yǔ)句 String sql = "select * from person"; // 創(chuàng)建SQL執(zhí)行對(duì)象 QueryRunner qr = new QueryRunner(JdbcUtil.getDataSource()); // 占位符賦值 // 執(zhí)行 List<Person> persons = qr.query(sql,new BeanListHandler<Person>(Person.class)); // 保存數(shù)據(jù) request.setAttribute("list", persons); // 轉(zhuǎn)發(fā) request.getRequestDispatcher("page3.jsp").forward(request, response);%>
需要留意page2.jsp調(diào)用了一個(gè)request.setAttribute(key, val); 的方法 將我們自己的list集合 用 名稱(chēng) persons 保存在了request對(duì)象中,<%@ 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>轉(zhuǎn)發(fā)案例</title></head><body> <div> <h1>展示人員信息</h1> <table border="1"> <tr> <th>編號(hào)</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>
大家 注意下這個(gè)數(shù)據(jù)的展示頁(yè)面,完全沒(méi)有java代碼,但是還能展示出來(lái)數(shù)據(jù)先寫(xiě)個(gè)簡(jiǎn)單點(diǎn)的,比如你想獲取你的web項(xiàng)目的項(xiàng)目名,也就是絕對(duì)定位到你的項(xiàng)目下,你可以這么寫(xiě)${pageContext.request.contextPath}它又什么用呢?以后我們向項(xiàng)目中引入CSS JS 的時(shí)候會(huì)用它這里我們要記住它的寫(xiě)法獲取單個(gè)變量 : // 在Servlet或JSP中保存數(shù)據(jù)request.setAttribute("username", "admin");// 在JSP中訪(fǎng)問(wèn)數(shù)據(jù)姓名: ${username}如果獲取對(duì)象屬性 : // 在Servlet或JSP中保存數(shù)據(jù)request.setAttribute("p", person);// 在JSP中訪(fǎng)問(wèn)數(shù)據(jù)人員編號(hào): ${p.id} 人員名稱(chēng) : ${p.name} .......獲取集合對(duì)象List : // 在Servlet或JSP中保存數(shù)據(jù)List names = new ArrayList();names.add(0, "LiYang");names.add(1,"WangHua");request.setAttribute("names",names);// 在JSP中訪(fǎng)問(wèn)數(shù)據(jù)姓名:${ names[0] }<br/>姓名:${ names[1] }<br/>注意 : 此處是用 變量[索引] 的方式獲取集合中元素的值Map :// 在Servlet或JSP中保存數(shù)據(jù)Map names = new HashMap();names.put("one", "LiYang");names.put("two", "WangHua");request.setAttribute("names", names);// 在JSP中訪(fǎng)問(wèn)數(shù)據(jù)姓名:${ names.one }<br/>姓名:${ names["two"] }<br/>注意 : 其實(shí)獲取map值只是把索引換成key而已
4) EL表達(dá)式的基本操作符 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" p refix="c" %>
4) JSTL的常用標(biāo)簽 <div> <h1>set 和 out 標(biāo)簽展示</h1> <!‐‐ set保存一個(gè)值 ‐‐> <c:set var="msg" value="hello,jstl!" /> <!‐‐ out取值 ‐‐> out 標(biāo)簽 :<h2><c:out value="${msg}" /></h2> <!‐‐ 直接取值也可以 ‐‐> 直接取值 :<h2>${msg}</h2></div>
效果 : <div> <h1>set 和 out 標(biāo)簽展示</h1> <!‐‐ set保存一個(gè)值 ‐‐> <c:set var="msg" value="hello,jstl!" /> <!‐‐ 刪除 ‐‐> <c:remove var="msg"/> <!‐‐ out取值 ‐‐> out 標(biāo)簽 :<h2><c:out value="${msg}" /></h2> <!‐‐ 直接取值也可以 ‐‐> 直接取值 :<h2>${msg}</h2> </div>
效果 : <div> <!‐‐ 比如保存一個(gè)數(shù)字 ‐‐> <c:set var="num" value="10" /> <h1>if標(biāo)簽舉例</h1> <h2>輸入數(shù)字為:${num}</h2> <c:if test="${num%2==0}"> <h2>判斷結(jié)果 : 偶數(shù)</h2> </c:if> <c:if test="${num%2!=0}"> <h2>判斷結(jié)果 :基數(shù)</h2> </c:if> </div>
效果 : <div> <!‐‐ 比如保存一個(gè)數(shù)字 ‐‐> <c:set var="num" value="10" /> <h1>choose標(biāo)簽舉例</h1> <h2>輸入數(shù)字為:${num}</h2> <c:choose> <c:when test="${num%2==0}"> <h2>判斷結(jié)果 : 偶數(shù)</h2> </c:when> <c:otherwise> <h2>判斷結(jié)果 :基數(shù)</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}次循環(huán) : 集合元素為 : ${s}</p> </c:forEach> </div>
效果 : <!‐‐ 按次數(shù)遍歷 ‐‐> <c:forEach var="i" begin="1" end="10"> ${i} </c:forEach>
結(jié)果 : <%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
舉例說(shuō)明 : 1. 數(shù)字格式化成 錢(qián) 的格式展示 <div> <h1>格式化標(biāo)簽使用 : </h1> <c:set var="money" value="123.456" /> <p>沒(méi)有格式化數(shù)字 : ${money}</p> <p>已經(jīng)格式化數(shù)字 : <fmt:formatNumber type="currency" value="${money}" /> </p> </div>
效果: <div> <h1>格式化標(biāo)簽使用 : </h1> <% Date date = new Date(); %> <c:set var="now" value="<%=date %>" /> <p>正常時(shí)間 : ${now}</p> <p>格式化好之后的時(shí)間:<fmt:formatDate value="${now}" pattern="yyyy-MM-dd"/></p> <p>格式化好之后的時(shí)間:<fmt:formatDate value="${now}" pattern="yyyy年MM月dd日"/></p> <c:set var="money" value="123.456" /> <p>沒(méi)有格式化數(shù)字 : ${money}</p> <p>已經(jīng)格式化數(shù)字 : <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"%><% // 模擬數(shù)據(jù)庫(kù)定義兩組人 // 普通用戶(hù) String[] losers = {"趙文明","孫建國(guó)","王小花","李建軍"}; // VIP用戶(hù) String[] vips = {"湯姆","杰瑞"}; // 設(shè)定編碼 request.setCharacterEncoding("UTF-8"); // 接收頁(yè)面請(qǐng)求 String userName = request.getParameter("userName"); // 定義最終的展示結(jié)果頁(yè) String result = "error.jsp"; //默認(rèn)錯(cuò)誤頁(yè) // 判斷是不是普通用戶(hù) for(String a:losers){ if(userName.equals(a)){ result = "loser.jsp"; break; } } // 判斷是不是VIP用戶(hù) for(String b:vips){ if(userName.equals(b)){ result = "vip.jsp"; break; } } // 根據(jù)業(yè)務(wù)結(jié)果轉(zhuǎn)發(fā)到對(duì)應(yīng)頁(yè)面 // request.getRequestDispatcher(result).forward(request, response); // 重定向到結(jié)果頁(yè)面 response.sendRedirect(result);%>
效果關(guān)鍵詞:數(shù)據(jù),基礎(chǔ),交互,動(dòng)態(tài),入門(mén),深入
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
客戶(hù)&案例
營(yíng)銷(xiāo)資訊
關(guān)于我們
微信公眾號(hào)
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。