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 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="Result.jsp" method="POST">
<h1>向JSP程式提交兩個整數:</h1>
<br>
<br>
<br>
<br>
<br>
<center>
<ul>
第一個數: <input type="text" name="first_number">
<br />
第二個數: <input type="text" name="last_number" />
<br>
<input type="submit" value="Submit" />
</form>
</body>
</html>
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伺服器的使用方法。