當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

网站开发之MyEclipse简单实现JSP网页表单提交及传递值

發(fā)布時間：2024/6/1 javascript 58 豆豆

生活随笔收集整理的這篇文章主要介紹了网站开发之MyEclipse简单实现JSP网页表单提交及传递值小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

本文主要是作者《中小型網(wǎng)站開發(fā)與設(shè)計》課程的內(nèi)容，非常基礎(chǔ)的文章，主要是指導學生學會用MyEclipse實現(xiàn)JSP網(wǎng)頁表單提交及傳遞參數(shù)。希望大家喜歡這篇文章，基礎(chǔ)文章，不喜勿噴~

PS：2019年1~2月作者參加了CSDN2018年博客評選，希望您能投出寶貴的一票。我是59號，Eastmount，楊秀璋。投票地址：https://bss.csdn.net/m/topic/blog_star2018/index

五年來寫了314篇博客，12個專欄，是真的熱愛分享，熱愛CSDN這個平臺，也想幫助更多的人，專欄包括Python、數(shù)據(jù)挖掘、網(wǎng)絡爬蟲、圖像處理、C#、Android等。現(xiàn)在也當了兩年老師，更是覺得有義務教好每一個學生，讓貴州學子好好寫點代碼，學點技術(shù)，"師者，傳到授業(yè)解惑也"，提前祝大家新年快樂。2019我們攜手共進，為愛而生。

一. MyEclipse實現(xiàn)網(wǎng)頁動態(tài)表單提交

1.新建Web Service工程，名稱為test02。

2.查看網(wǎng)頁JSP源代碼，位于WebRoot文件下，src用于編寫JAVA后臺代碼。

3.右鍵項目，點擊MyEclipse Server Application運行程序。

運行結(jié)果如下圖所示，顯示“This is JSP page.”。

4.插入HTML登錄頁面代碼，并顯示相關(guān)結(jié)果。

運行結(jié)果如下所示，一個比較簡單的登錄頁面。

5.通過 request.getParameter(標簽參數(shù)) 獲取傳遞的值。
完整代碼如下：

<%@ 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"></head><body><form action="" method="post" name="form"><table border="1" align="center"><tr><td colspan="2" align="center"><h2>貴州財經(jīng)大學登陸</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”) 獲取用戶名。運行結(jié)果如下：

但是通常網(wǎng)站提交的值會傳遞至另一個頁面顯示，接下來創(chuàng)建一個新的頁面MyJsp.jsp。

6.創(chuàng)建新的頁面 MyJsp.jsp 顯示表單提交的結(jié)果。
在WebRoot文件夾下右鍵新建JSP文件。

創(chuàng)建的文件名為MyJsp.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"></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 核心代碼如下：

最后的顯示結(jié)果如下所示：

二. HTML注冊及登錄頁面

最后補充三段比較好看的HTML代碼供大家學習，建議大家尋找比較好的模板，然后用 MyEclipse 修改成自己的網(wǎng)站。

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">  </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="基礎(chǔ)教育學院">基礎(chǔ)教育學院</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">專業(yè):</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="數(shù)字媒體">數(shù)字媒體</option><option value="信息安全">信息安全</option><option value="數(shù)字仿真">數(shù)字仿真</option><option value="移動應用開發(fā)">移動應用開發(fā)</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>

運行結(jié)果如下圖所示：

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="#">組織機構(gòu)</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="#">貴州財經(jīng)大學數(shù)據(jù)科學精品案例庫采購成交公告</a><br /><br /><a href="#">學報編輯部關(guān)于邀請參加學術(shù)會議的通知</a><br /><br /><a href="#">“強體魄、鑄儒魂”2018年貴州財經(jīng)大學足球賽競賽規(guī)程</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號京公網(wǎng)安備001號 <br /> <a href="http://www.baidu.com">擺渡</a> | <a href="http://www.baidu.com">數(shù)字貴才</a></td></tr></table></body> </html>

布局效果如下圖所示：

3.登錄界面

源代碼下載地址：

希望文章對大家有所幫助，如果有錯誤或不足之處，還請海涵。最近經(jīng)歷的事情太多，有喜有悲，關(guān)閉了朋友圈，希望通過不斷學習和寫文章來忘記煩勞，將憂郁轉(zhuǎn)換為動力，每周學習都記錄下來。
（By：Eastmount 2018-11-11 晚上12點 https://blog.csdn.net/Eastmount/）

總結(jié)

以上是生活随笔為你收集整理的网站开发之MyEclipse简单实现JSP网页表单提交及传递值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： [Python图像处理] 十一.灰度直方
下一篇： [知识图谱实战篇] 一.数据抓取之Pyt