當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
网站开发之MyEclipse简单实现JSP网页表单提交及传递值
生活随笔
收集整理的這篇文章主要介紹了
网站开发之MyEclipse简单实现JSP网页表单提交及传递值
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
本文主要是作者《中小型網站開發與設計》課程的內容，非常基礎的文章，主要是指導學生學會用MyEclipse實現JSP網頁表單提交及傳遞參數。希望大家喜歡這篇文章，基礎文章，不喜勿噴~
PS：2019年1~2月作者參加了CSDN2018年博客評選，希望您能投出寶貴的一票。我是59號，Eastmount，楊秀璋。投票地址：https://bss.csdn.net/m/topic/blog_star2018/index
五年來寫了314篇博客，12個專欄，是真的熱愛分享，熱愛CSDN這個平臺，也想幫助更多的人，專欄包括Python、數據挖掘、網絡爬蟲、圖像處理、C#、Android等。現在也當了兩年老師，更是覺得有義務教好每一個學生，讓貴州學子好好寫點代碼，學點技術，"師者，傳到授業解惑也"，提前祝大家新年快樂。2019我們攜手共進，為愛而生。一. MyEclipse實現網頁動態表單提交
1.新建Web Service工程，名稱為test02。
2.查看網頁JSP源代碼，位于WebRoot文件下，src用于編寫JAVA后臺代碼。
3.右鍵項目，點擊MyEclipse Server Application運行程序。
運行結果如下圖所示，顯示“This is JSP page.”。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(標簽參數) 獲取傳遞的值。
完整代碼如下：
其中核心代碼為 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/）
總結
以上是生活随笔為你收集整理的网站开发之MyEclipse简单实现JSP网页表单提交及传递值的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [Python图像处理] 十一.灰度直方
- 下一篇： gradle idea java ssm