JSP-實驗：表單傳值-提交表單並傳遞、獲取資料
阿新 • • 發佈：2018-11-16
JSP-實驗：表單傳值-提交表單並傳遞、獲取資料
說明: 參考連結在最後1
我這個版本執行過，反正沒大問題，但是用參考的那個網頁上的內容，就會出錯……原因也寫在後面了。
實驗
實驗內容：
利用表單傳遞資料，此題目包含01.html、01.jsp、02.jsp、03.jsp、04.jsp共五個程式。
以下圖1-5分別是這5個程式執行後的截圖。編寫程式程式碼實現截圖效果。
下載地址(實驗內容/原始碼)：
01.html
01.jsp
02.jsp
03.jsp04.jsp
相關知識
jsp表單form傳值
頁面間連結和資料傳遞的三種方式：
（1）通過form將資料提交到下一個頁面；
（2）通過連結將資料提交到下一個頁面；
（3）通過Session將資料提交到後續頁面。
session是一次會話只要瀏覽器不關閉就不會關閉會話，一般預設儲存30分鐘可以根據自己的需要更改。（關於如何更改，暫時沒有涉及）
原始碼
參考連結1
參考連結的程式碼有部分無法執行，重新修改了。
【備註】只貼上部分程式碼，原始碼自己下載吧。
01.html
<h2>利用表單傳遞資料</h2> <form name="form1" method="post" action="02.jsp"> <p>你的姓名： <input type="text" name="name"> </p> <p>你的愛好： <input type="text" name="hobby"> </p> <p>你所從事的行業： <select name="work"> <option></option> <!--預設為空，從下拉選單中選擇--> <option value="學生">學生</option> <option value="IT業">IT業</option> <option value="商業">商業</option> <option value="製造業">製造業</option> <option value="服務業">服務業</option> </select> </p> <p> <input type="Submit" value="提交"> <input type="Reset" value="重置"> </p> </form>
02.jsp
<p> <% //從表單中獲取資料 String name=new String(request.getParameter("name").getBytes("iso-8859-1"), "utf-8"); String hobby=new String(request.getParameter("hobby").getBytes("iso-8859-1"), "utf-8"); String work=new String(request.getParameter("work").getBytes("iso-8859-1"), "utf-8"); %> <% //驗證"名字(name)"的長度是否符合要求 if(name.length()<2||name.length()>8) out.println("你輸入的名字長度不符合要求"); else{ out.println("你的姓名是："+name+"<br>"); out.println("你的愛好是："+hobby+"<br>"); out.println("你所從事的工作是："+work+"<br>"); //將"名字(name)"儲存到session物件中,讓後續頁面(下個頁面、下下個頁面、……)引用 session.setAttribute("name",name); } %> <br> <!--將"愛好(hobby)"和"工作(work)"以連結的形式傳遞給下個頁面--> <a href="03.jsp?hobby=<%=hobby%>&work=<%=work%>">提交</a> </p> <hr> <p><font size="2">*將"名字(name)"儲存到session物件中,讓後續頁面(下個頁面、下下個頁面、……)引用</font></p> <p><font size="2">*將"愛好(hobby)"和"工作(work)"以連結的形式傳遞給下個頁面</font></p>
03.jsp
<body>
<p>從session物件中獲取"名字(name)"的值;<br>從連結中獲取"愛好(hobby)"和"工作(work)"</p>
<SCRIPT language="JavaScript">
function submit1()
{
document.forms["form1"].action="04.jsp";
document.form1.submit();
}
function edit1()
{
document.forms["form1"].action="01.jsp";
document.form1.submit();
}
</SCRIPT>
<body>
<h3>從session物件中獲取"名字(name)"的值;從連結中獲取"愛好(hobby)"和"工作(work)"</h3>
<%
String name=(String)session.getAttribute("name");
String hobby=request.getParameter("hobby");
String work= request.getParameter("work");
out.println("你的姓名是："+name+"<br>");
out.println("你的愛好是："+hobby+"<br>");
out.println("你所從事的工作是："+work+"<br>");
//將"愛好(hobby)"和"工作(work)"儲存在session物件中
session.setAttribute("hobby",hobby);
session.setAttribute("work",work);
%>
<form name="form1" method="post">
<input type="hidden" name="name" value="<%=name%>">
<input type="hidden" name="hobby" value="<%=hobby%>">
<input type="hidden" name="work" value="<%=work%>">
<p><h3>確認提交這些資訊嗎？</h3></p>
<input type="Button" name="Submit" value="確認" onClick="javascript:submit1()">
<input type="Button" name="Edit" value="修改" onClick="javascript:edit1()">
</form>
<hr>
<p><font size="2">*將"愛好(hobby)"和"工作(work)"儲存在session物件中,讓後續頁面(下個頁面、下下個頁面、……)引用</font></p>
<p><font size="2">*由於"名字(name)"在上個頁面中已經儲存在session物件中了,這裡沒必要再次儲存</font></p>
</body>
04.jsp
<%
//從sessoin物件中獲取資料
String name=(String)session.getAttribute("name");
String work=(String)session.getAttribute("work");
String hobby=(String)session.getAttribute("hobby");
%>
<p>
<font color="#0000FF"><%=name%></font>，你好！你所從事的工作是<font color="#0000FF"><%=work%></font>，在業餘時間喜歡<font color="#0000FF"><%=hobby%></font>。
</p>
01.jsp
<title>利用表單傳遞資料</title>
</head>
<%
String name=new String(request.getParameter("name").getBytes("iso-8859-1"), "utf-8");
String hobby=new String(request.getParameter("hobby").getBytes("iso-8859-1"), "utf-8");
String work=new String(request.getParameter("work").getBytes("iso-8859-1"), "utf-8");
%>
<body>
<h3>利用表單傳遞資料</h3>
<form name="form1" method="post" action="02.jsp">
<p>你的姓名：
<input type="text" name="name" value="<%=name%>">
</p>
<p>你的愛好：
<input type="text" name="hobby" value="<%=hobby%>">
</p>
<p>你所從事的行業：
<select name="work">
<%if(work.equals("學生")){%>
<option value="學生" selected>學生</option>
<option value="IT業">IT業</option>
<option value="商業">商業</option>
<option value="製造業">製造業</option>
<option value="服務業">服務業</option>
<%}else if(work.equals("IT業")){%>
<option value="學生">學生</option>
<option value="IT業" selected>IT業</option>
<option value="商業">商業</option>
<option value="製造業">製造業</option>
<option value="服務業">服務業</option>
<%}else if(work.equals("商業")){%>
<option value="學生">學生</option>
<option value="IT業">IT業</option>
<option value="商業" selected>商業</option>
<option value="製造業">製造業</option>
<option value="服務業">服務業</option>
<%}else if(work.equals("製造業")){%>
<option value="學生">學生</option>
<option value="IT業">IT業</option>
<option value="商業">商業</option>
<option value="製造業" selected>製造業</option>
<option value="服務業">服務業</option>
<%}else if(work.equals("服務業")){%>
<option value="學生">學生</option>
<option value="IT業">IT業</option>
<option value="商業">商業</option>
<option value="製造業">製造業</option>
<option value="服務業" selected>服務業</option>
<%}%>
</select>
</p>
<p>
<input type="Submit" value="提交">
<input type="Reset" value="重置">
</p>
</form>
</body>
遇到的問題
- 部分內容的中文亂碼。
而實際情況是：已經選擇了UTF-8了，雖然一部分正常但還有一部分（也就是提交的那部分內容，明明是中文，但顯示出來的是亂碼）- 原因：tomcat沒有配置好UTF-8
- 剛開始只配置了Eclipse：
JSP-（技巧）Eclipse預設新建檔案設定為適合中文的型別（UTF-8等）——解決中文亂碼問題 - amosC’s - CSDN部落格 - 其實還需要配置Tomcat的server.xml檔案：
JSP-tomcat設定編碼格式 配置utf-8（以防網頁框以及網頁顯示的時候中文亂碼） - amosC’s - CSDN部落格
- 在Eclipse無法執行，然而在瀏覽器上可以執行，完全沒出錯……
- 直接在Eclipse執行之後，複製一下網址再實驗吧……
- 具體就是第一個頁面還可以，第二個也沒問題
- 到了第3個頁面就出錯了
- 報錯內容:
HTTP Status 400 – Bad Request
Type Exception Report
Message Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
Description The server cannot or will not process the request due to something that is perceived to be a client error (e.g., malformed request syntax, invalid request message framing, or deceptive request routing).
Exception
java.lang.IllegalArgumentException: Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC 3986
org.apache.coyote.http11.Http11InputBuffer.parseRequestLine(Http11InputBuffer.java:467)
org.apache.coyote.http11.Http11Processor.service(Http11Processor.java:294)
org.apache.coyote.AbstractProcessorLight.process(AbstractProcessorLight.java:66)
org.apache.coyote.AbstractProtocol$ConnectionHandler.process(AbstractProtocol.java:770)
org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1415)
org.apache.tomcat.util.net.SocketProcessorBase.run(SocketProcessorBase.java:49)
java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
java.lang.Thread.run(Unknown Source)
Note The full stack trace of the root cause is available in the server logs.
Apache Tomcat/9.0.11
預覽效果
01 html：
02 jsp：
03 jsp：
04 jsp：
01 jsp：
返回03，點選“修改”，跳轉到01.jsp。圖和01.html的一樣。
既然看到了最後，那就直接給個壓縮包吧，可以直接點選下載原始碼：
備註：修改了一次，問題不大，然後也就沒有重新上傳原始檔了。
//end
其他說明可以點選簡介檢視。
轉載請註明原文章連結，並標註作者amosC。
格式如下：來源：（此處附上原文連結）
作者：amosC（amoscey）