HTML和JSP的互動
HTML和JSP的互動
1、任務簡介
本部落格分享的是工程訓練任務中“中介軟體和WEB服務”裡面的內容，主要涉及HTML和JSP的知識，我通過兩個普通任務和一個挑戰任務將所學成果分享給大家。
2、任務程式碼
（1）普通任務1
1）任務內容
通過HTML表單輸入兩個數字，提交給jsp程式，完成此兩個數字相加結果的輸出。
2）任務程式碼
首先需要製作一個HTML網頁，通過該HTML頁面給JSP頁面資料，我使用EditPlus製作該網頁，將其標題命名為“求和網頁輸入端”，其中需要使用到標籤br進行換行，並且br標籤不需要結束標誌，HTML程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> HTML網頁製作完成後就是JSP頁面的製作，需要指定編寫語言為Java，並匯入java.util類下的所有包，指定編碼方式為UTF-8，兩個頁面均使用標籤命名為“求和”，對於在HTML頁面中提交的兩個數字，在JSP中都需要從request中取得值，並將得到的字串轉換為整形變數進行輸出，將兩個數字分別輸出到介面後，還需要將相加的結果進行輸出顯示，完整的程式碼如下：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>求和</title>
</head>
<body>
<h1>求和網頁輸出端(羅思洋)</h1>
<center>
<br>
<br>
<br>
<br>
<br>
<ul>
<li><p><b>第一個數:</b>
<%
String s=request.getParameter("first_number");
int m=Integer.parseInt(s);
out.println(m);
%>
</p></li>
<li><p><b>第二個數:</b>
<%
String t=request.getParameter("last_number");
int n=Integer.parseInt(t);
out.println(n);
%>
</p></li>
<li><p><b>兩個數的和是:</b>
<%
int p=m+n;
out.println(p);
%>
</p></li>
</ul>
</body>
</html>3）瀏覽器檢視
將兩個檔案打包後存入指定路徑C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps下，使用之前任務中學習的方法開啟該網頁，如下圖：
點選submit後如下圖：
（2）普通任務2
1）任務內容
通過HTML表單輸入3個字串，提交給jsp程式，完成在字串1中統計字串2出現的次數，並把各個字串2字串在字串1中替換為字串3字串，最後把替換結果輸出到瀏覽器。
2）任務程式碼
本部分中需要製作的HTML網頁格式與上面兩個步驟中製作的HTML網頁類似，只需要增加一個字串的輸入欄即可，所以可以在前面的基礎上進行修改，將該網頁命名為String.html，具體程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>字串的替換</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<h1>字串替換輸入端（羅思洋）</h1>
<form action="Replace.jsp" method="POST">
<h1>向JSP程式提交三個字串：</h1>
<br>
<br>
<br>
<br>
<br>
<center>
<ul>
第一個字串: <input type="text" name="First_String">
<br />
第二個字串: <input type="text" name="Second_String" />
<br />
第三個字串: <input type="text" name="Third_String" />
<br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
在進行JSP頁面的製作時，需要指定編寫語言為Java，並匯入java.util類下的所有包，指定編碼方式為UTF-8，兩個頁面均使用標籤title命名為“字串的替換”，對於在HTML頁面中提交的三個數字，在JSP中都需要使用與之前步驟中相同的方法從request中取得值，其中需要使用ISO-8859-1進行翻譯，並指定編碼格式為utf-8碼；
使用的while迴圈，其方法與以前所學習的Java application中學習的while迴圈類似，迴圈中還使用了indexOf方法來查詢元素的位置，並將統計結果輸出；
除了以上提到的點外，還需要使用第三個字串中的內容替換第二個字串的內容，並將結果輸出，其中需要使用replace方法進行字串的替換，完整的程式碼如下圖：
<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>字串的替換</title>
</head>
<body>
<h1>字串替換輸出端（羅思洋）</h1>
<h1>替換後的結果為：</h1>
<center>
<br>
<br>
<br>
<br>
<br>
<ul>
<li><p><b>第一個字串:</b>
<%
String s=request.getParameter("First_String");
String ss=new String(s.getBytes("ISO-8859-1"), "utf-8");
out.println(ss);
%>
</p></li>
<li><p><b>第二個字串:</b>
<%
String t=request.getParameter("Second_String");
String tt=new String(t.getBytes("ISO-8859-1"), "utf-8");
out.println(tt);
int count=0;
int start=0;
%>
</p></li>
<li><p><b>第三個字串:</b>
<%
String a=request.getParameter("Third_String");
String aa=new String(a.getBytes("ISO-8859-1"), "utf-8");
out.println(aa);
%>
</p></li>
<li><p><b>第二個字串在第一個字串中出現的次數是:</b>
<%
while (s.indexOf(t, start)>=0 && start<s.length())
{
count++;
start=s.indexOf(t, start)+t.length();
}
out.println(count);
%>
</p></li>
<li><p><b>替換後的字串是:</b>
<%
String str=s.replace(t,a);
String str1=new String(str.getBytes("ISO-8859-1"), "utf-8");
out.println(str1);
%>
</p></li>
</ul>
</body>
</html>3）瀏覽器檢視
將兩個檔案打包到資料夾JSP3中，並將該資料夾存入指定路徑C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps下，使用之前任務中學習的方法開啟該網頁，在開啟HTML網頁String.html後顯示結果如下：
此時我將第一個字串設為“我是羅思洋”，第二個字串設為“我是”，第三個字串設為“I am ”，點選Submit後第三個字串可以替換第二個字串，並將替換結果顯示到JSP頁面上，結果如下圖所示：
（3）挑戰任務
1）任務內容
通過HTML表單輸入一個4個選項的複選框欄位，提交給jsp程式，要求在瀏覽器上輸出這4個複選框哪幾個被勾選了。
2）任務程式碼
任務挑戰中所需要製作的HTML網頁與普通任務重需要製作的HTML網頁稍有不同，但是難度差不多，對於標題的設定方法和提示性文字的輸入就不過多贅述了，在本任務中不需要我們輸入字串，而是需要勾選所需資訊，故需要將intput type改為checkbox，其中checkbox代表HTML中的一個選擇框，在HTML 文件中標籤input type=”checkbox”每出現一次，checkbox物件就會被建立，關於HTML中的intput物件可以通過菜鳥教程進行學習，建立一個複選框的程式碼如下圖：
此外還可以使用標籤font size=6和標籤font color=blue定義字號大小以及字型的顏色，我將字號大小定義為6，而將字型顏色定義為藍色，這些都是可以自行修改的；
後面提交鍵的建立方法與普通任務一樣，我將該網頁命名為Langueage.html，具體程式碼如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>多選</title>
<meta name="generator" content="editplus" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
</head>
<body>
<h1>多選輸入端（羅思洋）</h1>
<form action="Result1.jsp" method="post">
<h1>請選擇您感興趣的語言：</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>
<font size=6><font color=blue>
<input type="checkbox" name="Language" value="漢語" />漢語<br>
<input type="checkbox" name="Language" value="英語" />英語<br>
<input type="checkbox" name="Language" value="日語" />日語<br>
<input type="checkbox" name="Language" value="法語" />法語<br>
<p><input type="submit" value="submit" /></p>
</form>
</body>
</html>製作完HTML網頁後就需要製作JSP頁面，需要將JSP頁面指定編碼格式為utf-8碼，這樣就可以避免亂碼的出現，需要將JSP頁面命名為Result1.jsp，並將兩個頁面的標題均設定為“多選”，在頁面前端輸入提示資訊，對於需要輸出的資訊我叫字號大小和字型顏色設定的與前面的HTML頁面相同；
在對勾選資訊進行識別時，首先需要使用request.setCharacterEncoding對客戶端請求進行重新編碼，然後需要使用getParameterValues方法將值取到b[]陣列中，使用for迴圈便利陣列後輸出已勾選的語言，具體程式碼如下：
<%@ page contentType="text/html;charset=utf-8" %>
<html>
<head>
<title>多選</title>
</head>
<body>
<h1>多選輸出端（羅思洋）</h1>
<h1>您感興趣的語言為：</h1>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<center>
<font size=6><font color=blue>
<%
request.setCharacterEncoding("utf-8");//對客戶端請求進行重新編碼
String b[] = request.getParameterValues("Language");//用getParameterValues的方法，將核取到的值取到b[]陣列內
if(b != null) {//判斷陣列不為空
for(int i = 0; i<b.length; i++) {//for迴圈遍歷陣列
out.println(b[i]+"<br>");//輸出
}
}
%>
</body>
</html>
3）瀏覽器檢視
將兩個檔案打包到資料夾JSP4中，並將該資料夾存入指定路徑C:\Program Files\Apache Software Foundation\Tomcat 7.0\webapps下，使用之前任務中學習的方法開啟該網頁，結果如下：
本步驟中我勾選了“漢語”和“英語”，提交後顯示的結果如下圖：
從結果中可以看出，JSP頁面可以準確顯示我在HTML頁面中勾選的資訊，達到了任務的要求；
3、總結
通過本次任務我學會了HTML網頁與JSP伺服器之間的互動方法，為以後更加深入的學習打下了基礎，其中使用到了Tomcat伺服器，具體使用方法自行百度即可，可以說是十分簡單的，如果覺得文章有用可以加波關注，以後我還會分享nginx伺服器與natapp伺服器的使用方法。