網站開發之MyEclipse簡單實現JSP網頁表單提交及傳遞值
本文主要是作者《中小型網站開發與設計》課程的內容，非常基礎的文章，主要是指導學生學會用MyEclipse實現JSP網頁表單提交及傳遞引數。希望大家喜歡這篇文章，基礎文章，不喜勿噴~
PS：2019年1~2月作者參加了CSDN2018年部落格評選，希望您能投出寶貴的一票。我是59號，Eastmount，楊秀璋。投票地址：https://bss.csdn.net/m/topic/blog_star2018/index
一. MyEclipse實現網頁動態表單提交
1.新建Web Service工程，名稱為test02。
2.檢視網頁JSP原始碼，位於WebRoot檔案下，src用於編寫JAVA後臺程式碼。
3.右鍵專案，點選MyEclipse Server Application執行程式。
4.插入HTML登入頁面程式碼，並顯示相關結果。
<body>
<form action="" method="post" name="form">
<table border="1" align="center">
<tr><td colspan="2" align="center"><h2>貴州財經大學登陸</h2></td></tr>
<tr><td>使用者名稱:</td>
<td><input type="text" name="t1" value=""/></td></tr>
<tr><td>密碼:</td>
<td><input type="password" name="t2" /></td></tr>
<tr><td colspan="2" align="center"><input type="submit" name="t3" value="點選試試">
<input type="reset" name="t4" value="取消算了"/></td></tr>
</table>
</form>
</body>
執行結果如下所示，一個比較簡單的登入頁面。
5.通過 request.getParameter(標籤引數) 獲取傳遞的值。
完整程式碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Login Page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<form action="" method="post" name="form">
<table border="1" align="center">
<tr><td colspan="2" align="center"><h2>貴州財經大學登陸</h2></td></tr>
<tr><td>使用者名稱:</td>
<td><input type="text" name="t1" value=""/></td></tr>
<tr><td>密碼:</td>
<td><input type="password" name="t2" /></td></tr>
<tr><td colspan="2" align="center"><input type="submit" name="t3" value="點選試試">
<input type="reset" name="t4" value="取消算了"/></td></tr>
</table>
</form>
<% String a = request.getParameter("t1");
if(a!=null) {
try {
out.print("當前使用者名稱為:"+a);
}catch(NumberFormatException e) {
out.print("請輸入使用者名稱和密碼");
}
}
%>
</body>
</html>
其中核心程式碼為 String a = request.getParameter(“t1”) 獲取使用者名稱。執行結果如下：
但是通常網站提交的值會傳遞至另一個頁面顯示，接下來建立一個新的頁面MyJsp.jsp。
6.建立新的頁面 MyJsp.jsp 顯示錶單提交的結果。
在WebRoot資料夾下右鍵新建JSP檔案。
程式碼如下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>Main page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
</head>
<body>
<%
request.setCharacterEncoding("UTF-8");
String a = request.getParameter("t1");
String b = request.getParameter("t2");
if(a!=null) {
out.print("<marquee direction=left>當前使用者名稱為:" + a +"<br />");
out.print("密碼為:" + b + "</marquee>");
}
%>
</body>
</html>
index.jsp 核心程式碼如下：
MyJsp.jsp 核心程式碼如下：
最後的顯示結果如下所示：
二. HTML註冊及登入頁面
最後補充三段比較好看的HTML程式碼供大家學習，建議大家尋找比較好的模板，然後用 MyEclipse 修改成自己的網站。
1.註冊頁面
<html>
<head>
<style type="text/css">
/* 這個連結改變顏色 */
a.one:link {color: #ff0000}
a.one:visited {color: #0000ff}
a.one:hover {color: #ffcc00}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>使用者註冊</title>
<style type="text/css">
<!--
.STYLE1 {color: #FF0000}
-->
</style>
</head>
<body>
<form id="form1" name="form1" method="post">
<table width="570" border="0" align="center">
<tr>
<td colspan="2" align=center><H2>學生使用者註冊</H2></td>
</tr>
<tr>
<td colspan="2" align=right><A href="index.php" class="one">返回</A></td>
</tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
</tr>
<tr>
<td width="217"><div align="right">學號:<span class="STYLE1">*</span></div></td>
<td width="343"><input type="text" name="number" id="number" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">姓名:<span class="STYLE1">*</span></div></td>
<td><input type="text" name="name" id="name" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">插入檔案:<span class="STYLE1">*</span></div></td>
<td><input type="file" name="wj" id="wj" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">性別:<span class="STYLE1">*</span></div></td>
<td>男<input type="radio" value="男" name="sex">
女<input type="radio" value="女" name="sex">
</td>
</tr>
<tr>
<td><div align="right">興趣:<span class="STYLE1">*</span></div></td>
<td>吃飯<input type="checkbox" value="吃飯" name="interest1">
睡覺<input type="checkbox" value="睡覺" name="interest2">
寫程式碼<input type="checkbox" value="睡覺" name="interest3">
</td>
</tr>
<tr>
<td><div align="right">Email郵件:<span class="STYLE1">*</span></div></td>
<td><input type="text" name="email" id="email" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">密碼:<span class="STYLE1">*</span></div></td>
<td><input type="password" name="pwd" id="pwd" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td><div align="right">確認密碼:<span class="STYLE1">*</span></div></td>
<td><input type="password" name="pwd2" id="pwd2" value="" style=width:165pt; maxlength="50"/></td>
</tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
</tr>
<tr>
<td><div align="right">學院:</div></td>
<td><select name="zy" id="zy" value="" style=width:165pt; maxlength="50">
<option value="軟體學院">軟體學院</option>
<option value="計算機學院">計算機學院</option>
<option value="自動化學院">自動化學院</option>
<option value="光電學院">光電學院</option>
<option value="車輛學院">車輛學院</option>
<option value="資訊與電子學院">資訊與電子學院</option>
<option value="機電學院">機電學院</option>
<option value="基礎教育學院">基礎教育學院</option>
<option value="其他">其他</option>
</select>
</td>
</tr>
<tr>
<td><div align="right">出生日期:<span class="STYLE1">*</span></div></td>
<td><input type="date" name="birth" id="birth" value=""
style=width:165pt; maxlength="50" ></td>
</tr>
<tr>
<td><div align="right">喜歡顏色:<span class="STYLE1">*</span></div></td>
<td><input type="color" name="col" id="col" value=""
style=width:165pt; maxlength="50" ></td>
</tr>
<tr>
<td><p align="right">專業:</p>
<p align="right">（單選）</p></td>
<td><select name="subject" size="4" id="subject" value="" style=width:165pt; maxlength="50">
<option value="軟體工程">軟體工程</option>
<option value="數字媒體">數字媒體</option>
<option value="資訊保安">資訊保安</option>
<option value="數字模擬">數字模擬</option>
<option value="移動應用開發">移動應用開發</option>
</select></td>
</tr>
<tr>
<td><div align="right">入學年月:</div></td>
<td><select name="year" id="year" value="" style=width:165pt; maxlength="50">
<option value="2010年">2010年</option>
<option value="2011年">2011年</option>
<option value="2012年">2012年</option>
<option value="2013年">2013年</option>
<option value="2014年">2014年</option>
<option value="2015年">2015年</option>
<option value="2016年">2016年</option>
<option value="2017年">2017年</option>
<option value="2018年">2018年</option>
</select>
</td>
</tr>
<tr>
<td><div align="right"></div></td>
<td><select name="month" id="month" value="" style=width:165pt; maxlength="50">
<option value="1月">01月</option>
<option value="2月">02月</option>
<option value="3月">03月</option>
<option value="4月">04月</option>
<option value="5月">05月</option>
<option value="6月">06月</option>
<option value="7月">07月</option>
<option value="8月">08月</option>
<option value="9月">09月</option>
<option value="10月">10月</option>
<option value="11月">11月</option>
<option value="12月">12月</option>
</select>
</td>
</tr>
<tr>
<td colspan="2"><hr width="95%" size="1" color="#FF0000"></td>
</tr>
<tr>
<td><div align="right">
<input type="submit" style='font-size:15px' name="Submit" value="提交"/>
</div></td>
<td><div align="center">
<input type="reset" name="button2" style='font-size:15px' id="button2" value="重置" />
</div></td>
</tr>
</table>
</form>
</body>
</html>
執行結果如下圖 所示：
2.table簡單佈局
<html>
<head>
<title>圖片檢視器</title>
<script>
function showDatu(src) {
document.getElementById("big").src = src;
}
</script>
</head>
<body>
<table border="1" style="table-layout:fixed" width="80%" height="80%" align="center">
<tr>
<td colspan=4 align="center"><img src="images/gufe_logo.png"></td>
</tr>
<tr>
<td align="center"><h3><a href="#">貴財概況</a></h3></td>
<td align="center"><h3><a href="#">組織機構</a></h3></td>
<td align="center"><h3><a href="#">校園服務</a></h3></td>
<td align="center"><h3><a href="#">教學教育</a></h3></td>
</tr>
<tr height="50%" width="60%">
<td colspan=2 width="60%" align="center" style="padding:10px">
<img src="images/wall1.jpg" width="70%" height="60%" id="big" />
<br />
<img src="images/wall_s1.jpg" width="60" height="60" onmouseover="showDatu('images/wall1.jpg')"/>
<img src="images/wall_s2.jpg" width="60" height="60" onmouseover="showDatu('images/wall2.jpg')" />
<img src="images/wall_s3.jpg" width="60" height="60" onmouseover="showDatu('images/wall3.jpg')" />
<img src="images/wall_s4.jpg" width="60" height="60" onmouseover="showDatu('images/wall4.jpg')" />
</td>
<td>
<a href="#">貴州財經大學資料科學精品案例庫採購成交公告</a><br /><br />
<a href="#">學報編輯部關於邀請參加學術會議的通知</a><br /><br />
<a href="#">“強體魄、鑄儒魂”2018年貴州財經大學足球賽競賽規程</a><br /><br />
</td>
<td >
<form >
Username: <input type="text" placeholder="請輸入使用者名稱"/><br />
Password: <input type="password" /><br />
<input type="submit" value="登陸"/> <input type="reset" value="取消"/>
</form>
</td>
</tr>
<tr>
<td colspan=4 align="center">
©2018 YXZ 京ICP證XXX號 京公網安備001號 <br />
<a href="http://www.baidu.com">擺渡</a> | <a href="http://www.baidu.com">數字貴才</a>
</td>
</tr>
</table>
</body>
</html>
佈局效果如下圖所示：
3.登入介面
原始碼下載地址：
希望文章對大家有所幫助，如果有錯誤或不足之處，還請海涵。最近經歷的事情太多，有喜有悲，關閉了朋友圈，希望通過不斷學習和寫文章來忘記煩勞，將憂鬱轉換為動力，每週學習都記錄下來。
（By：Eastmount 2018-11-11 晚上12點 https://blog.csdn.net/Eastmount/）
相關文章
- Java+MyEclipse+Tomcat (二)配置Servlet及簡單實現表單提交JavaEclipseTomcatServlet
- 用phpmailer實現網頁表單提交傳送郵件功能PHPAI網頁
- django 網站實現簡單分頁Django網站
- 網站開發之滑鼠懸停簡單特效實現（四）網站特效
- 前端頁面上實現表單提交檔案上傳功能前端
- **PHP分步表單提交思路（分頁表單提交）PHP
- 網站開發之DIV+CSS簡單佈局網站入門篇（五）網站CSS
- 簡單網頁網頁
- Delphi自動提交網頁表單和獲取框架網頁原始碼網頁框架原始碼
- SpringMvc上傳圖片及表單提交（單檔案+實體類引數提交）SpringMVC
- EasyUI實現的form表單提交簡單程式碼例項UIORM
- c#簡單實現提取網頁內容C#網頁
- Web網頁表單Web網頁
- AngularJS實現的表單編輯提交功能簡單介紹AngularJS
- ASP.NET 網頁- HTML 表單簡介ASP.NET網頁HTML
- webscoket+jsp實現簡單的多人聊天頁面WebJS
- js函式引數值傳遞和引用傳遞簡單介紹JS函式
- 網頁佈局------for表單網頁
- 網站 越簡單越好網站
- 記微信網頁開發單頁面返回不重新整理的實現網頁
- 專業建站網站 網站建設 網站開發 官網開發 網頁設計 網頁網站網頁
- 靜態頁面之間傳值簡單程式碼例項
- Jsp動態網頁開發JS網頁
- JavaWeb開發之頁面傳值JavaWeb
- 簡單的網頁製作網頁
- HTML簡單網頁製作HTML網頁
- CSS實現的網頁柵格佈局簡單介紹CSS網頁
- js如何阻止表單提交簡單介紹JS
- 網站策劃：使簡單的想法更簡單網站
- 簡單的網頁登入頁面網頁
- FullPage.js – 輕鬆實現全屏滾動（單頁網站）效果JS網站
- prometheus 簡單使用及簡單 middleware 開發Prometheus
- .net頁面間的引數傳遞簡單例項單例
- Java開源工具 網站開發工具清單Java開源工具網站
- 簡單快遞系統 java實現Java
- CSS3建立簡單的網頁動畫–實現彈跳球動CSSS3網頁動畫
- 可以被提交的表單元素簡單介紹
- 簡單的網頁彈窗陷阱網頁