pg电子双喜临门爆分视频

書名： Java EE框架開發技術與案例教程
作者名：張繼軍董衛
本章字數： 7610字
更新時間： 2020-05-28 14:20:29

2.1 表示層（視圖層）技術

在Web應用程序中，視圖層的設計技術有HTML、JSP、JSTL和EL表達式等。

（1）HTML：是一組標簽，負責網頁的基本表現形式。

（2）JavaScript：是在客戶端瀏覽器運行的語言，負責在客戶端與用戶進行互動。

（3）CSS技術：是一個樣式表，起到美化整個頁面的作用。

（4）JSP技術：是一種運行在服務器端的腳本語言，用來開發動態網頁。

（5）EL（Expression Language）：是表達式語言，目前已成為標準規范之一。

2.1.1 HTML技術與應用案例

HTML（Hyper Text Markup Language）即超文本標記語言，是用來編寫網頁文件的標準，定義了一組標記（tag，也稱標簽）用來描述Web文檔數據。目前HTML已經升級到HTML 5版本。

HTML的主要標簽如表2-1所示。在該表中給出了常用標記及其功能說明。在HTML文檔設計中，利用表2-1中的有關標簽，控制頁面的顯示內容和顯示方式。

表2-1 HTML常用標簽與功能說明

在Web應用程序中，使用較多的是表單的設計及表單標簽。表2-2給出了表單設計常用的標簽。

表2-2 表單設計常用的標簽及其作用

【例2-1】設計如圖2-1所示的學生信息注冊網頁。

圖2-1 學生信息注冊頁面

【分析】該頁面采用表單的方式設計，為了使頁面各元素整齊，采用表格的方式控制元素的位置。該例中給出了表單常用的各種元素，請注意它們的使用特點。

【實現代碼】

    ＜body＞
        ＜form action=""＞
          ＜table border="0" align="center" width="600"＞
          ＜tr＞＜td colspan="3"align="center"height="40"＞填寫注冊信息＜/td＞＜/tr＞
          ＜tr＞ ＜td align="right"＞用戶名：*＜/td＞
              ＜td＞＜input type="text" name="userName"/＞＜/td＞
              ＜td＞用戶名由字母開頭，后跟字母、數字或下劃線！＜/td＞ ＜/tr＞
          ＜tr＞ ＜td align="right"＞密碼：*＜/td＞
              ＜td＞＜input type="password" name="userPwd"/＞＜/td＞
              ＜td＞設置登錄密碼，至少6位！＜/td＞ ＜/tr＞
          ＜tr＞ ＜td align="right"＞確認密碼：*＜/td＞
              ＜td＞＜input type="password" name="userPwd1"/＞＜/td＞
              ＜td＞請再輸入一次你的密碼！＜/td＞ ＜/tr＞
            ＜tr＞ ＜td align="right"＞性別：*＜/td＞
              ＜td＞＜input type="radio" name="userSex" value="男" checked/＞男
                ＜input type="radio" name="userSex" value="女"/＞女＜/td＞
              ＜td＞請選擇你的性別！＜/td＞ ＜/tr＞
          ＜tr＞ ＜td align="right"＞郵箱地址：*＜/td＞
              ＜td＞＜input type="text" name="userEmail" /＞＜/td＞
              ＜td＞請填寫您的常用郵箱，可以用此郵箱找回密碼！＜/td＞ ＜/tr＞
          ＜tr＞ ＜td align="right" valign="top"＞基本情況：*＜/td＞
              ＜td colspan="2"＞
                  ＜textarea name="userBasicInfo" rows="5" cols="50"＞＜/textarea＞＜/td＞ ＜/tr＞
          ＜tr＞ ＜td colspan="3" align="center" height="40"＞
                ＜input type="checkbox" name="accept" value="yes"/＞
                我已經仔細閱讀并同意接受用戶使用協議＜/td＞ ＜/tr＞
          ＜tr＞＜td colspan="3" align="center" height="40"＞
                ＜input type="submit" value="確認"/＞&nbsp;
                ＜input type="reset" value="取消"/＞＜/td＞ ＜/tr＞
          ＜/table＞
        ＜/form＞
    ＜/body＞

【運行測試】運行該頁面，將出現如圖2-1的界面。

這里只給出了一個簡單的表單設計，對于其他有關標簽的使用，請讀者自己按標簽格式應用練習。

2.1.2 CSS技術與應用案例

使用CSS可方便、靈活地設置網頁中不同元素的外觀屬性，從而使網頁在外觀上達到一個更好的效果。使用CSS技術，需要首先定義樣式表，然后使用該樣式表。

1.CSS樣式表的定義

CSS樣式表的定義就是定義CSS選擇器及CSS的有關屬性、屬性值，有3種基本定義方式。

（1）標記選擇器——通過HTML標簽定義樣式表

基本語法格式如下。

    引用樣式的對象{標簽屬性：屬性值；標簽屬性：屬性值；標簽屬性：屬性值；……}

（2）類別選擇器——使用class定義樣式表

若要為同一元素創建不同的樣式或為不同元素創建相同的樣式，可以使用CSS類選擇器，CSS類有兩種格式，定義時，在各自定義類的名稱前面加一個點號。

    格式1：標簽名．類名{屬性：屬性值；屬性：屬性值；屬性：屬性值；……}

注意：這種格式的類指明所定義的樣式只能用在類名前所指定的標簽上。

    格式2:．類名{屬性：屬性值；屬性：屬性值；屬性：屬性值；……}

注意：該格式的類使所有class屬性值為該類名的標簽都遵守該類所定義的樣式。

（3）ID選擇器——使用id定義樣式表

在HTML頁面中，ID選擇符用來對某個單一元素定義單獨的樣式，定義ID選擇符要在ID名稱前加上一個#號。基本語法如下。

    #id名稱{屬性：屬性值 屬性：屬性值；屬性：屬性值；……}

注意：使用該類樣式表時，需要將該樣式的網頁內容前加一個id="id名稱"。

2．樣式表的使用

在HTML中使用CSS的方法有3種：行內式、內嵌式和鏈接式。

1）行內式（不需要定義選擇器）：利用style屬性直接為元素設置樣式，只對當前的標簽起作用。如下面的代碼所示。

    ＜p style="color:#FF0000; font-size:20px; text-decoration:underline; "＞正文內容1＜/p＞
    ＜p style="color:#000000; font-style:italic; "＞正文內容2＜/p＞

2）內嵌式：這種方式需要先定義有關的選擇器，然后再使用。利用＜style＞＜/style＞標簽對，將樣式表（選擇器）定義在＜head＞＜/head＞標簽對之間，內嵌式樣式表的作用范圍是本HTML文檔內。如下面的代碼所示。

3）鏈接式：鏈接式樣式表是將定義好的CSS單獨放到一個以．css為擴展名的文件中，再使用＜link＞標簽鏈接到所需要使用的網頁中，在＜head＞與＜/head＞之間。

＜link＞標簽鏈接到網頁的格式：

    ＜link href="*.css文件路徑" type="text/css" rel="stylesheet"＞

例如：首先定義一個sheet_x.css文檔，其代碼如下。

    h2{ color:#0000FF; }
    p{ color:#FF0000; text-decoration:underline; font-weight:bold; font-size:15px; }

其次，在HTML中使用。

3.CSS常用屬性

從CSS選擇器的定義可看出，CSS美化網頁是通過設置網頁元素的屬性來實現的，主要有字體屬性、顏色屬性、背景屬性和文本段落屬性等。

（1）字體屬性

字體屬性主要有font-family、font-size及font等，具體含義與取值如表2-3所示。

表2-3 字體屬性含義與取值

（2）顏色和背景屬性

顏色和背景屬性主要有color、background-color、background-image和background等，其具體含義與取值如表2-4所示。

表2-4 顏色和背景屬性含義與取值

（3）文本段落屬性

文本段落的屬性包括字符間隔、文字修飾、縱向排列、文本轉換、文本排列水平對齊方式、文本縮進和文本行高等。具體含義與取值如表2-5所示。

表2-5 文本段落的屬性含義與取值

對于其他的有關屬性，若需要可查看有關的書籍，這里不再詳細介紹。

【例2-2】在【例2-1】已給出了一個頁面（見圖2-1），該頁面沒有修飾，不夠美觀，采用CSS修飾頁面，重新設計頁面，如圖2-2所示。

圖2-2 修飾后的注冊頁面

【分析】該問題需要兩步：首先設計CSS文檔，在該文檔中包含所需要的格式控制，然后引用CSS中的樣式，重新設計頁面。

【實現】

（1）設計CSS樣式表文檔

對比圖2-1和圖2-2可知，在圖2-2中，改變了頁面所有字體的大小，頁面最上面的“填寫注冊信息”也改變了顏色、字體等，每項輸入域后面的提示信息也改變了，根據這些變化，編寫CSS文檔：ch02_2.css，該文檔的代碼如下。

    #title{color:red; font-size:20px; font-weight:bod; }
    #i{width:350px; height:15px; color:blue; font-size:12px; }
    table{text-align:left; }
    #t{text-align:right; }

（2）利用CSS對頁面實現修飾

引用樣式表ch02_2.css，對程序ch02_1.html進行修改，形成新代碼文檔ch02_2.html。

首先，通過鏈接式導入樣式表，修改的這部分代碼如下。

    ＜head＞ ＜link href="ch02_2.css" type="text/css" rel="stylesheet"＞ ＜/head＞

然后，修改頁面的＜body＞＜/body＞之間的代碼，其部分代碼如下。

對于其他行，也采用這樣的修改。

【運行測試】通過這樣的修改，運行界面如圖2-2所示，可以看出頁面比較美觀。

2.1.3 JavaScript技術與應用案例

JavaScript是一種簡單的腳本語言，可以在瀏覽器中直接運行，是一種在瀏覽器端實現網頁與客戶交互的技術。JavaScript代碼可以直接嵌套在HTML網頁中，它響應一系列的事件，并執行事件處理函數，完成所需要的功能。

1.JavaScript的基本語法

JavaScript腳本語言的基本成分有數據類型、常量變量、運算符、表達式、控制語句和函數等。

1）數據類型：主要數據類型有int、float、string、boolean和null（空類型）。

2）變量：使用命令var聲明變量，格式為：var變量名[=值];。

3）運算符：提供了算術運算符、關系運算符、邏輯運算符、字符串運算符、位操作運算符、賦值運算符和條件運算符等運算符。這些運算符與Java語言中支持的運算符及功能相同。

4）控制語句：控制語句有分支語句（if、switch）和循環語句（while、do-while、for），這些語句的語法規則和使用與Java語言中的要求一樣。

5）函數：函數聲明格式如下。

    function functionName([parameter1, parameter2, …]){ //有關的處理語句；}

2.JavaScript的事件

在瀏覽器中，網頁與客戶的交互都是通過“事件”引發的，當一個事件發生時，執行相應的JavaSript腳本或指定的函數。

（1）JavaScript的事件

JavaScript的事件是指用戶對網頁的一些特定“操作”，表2-6給出了常用的事件、事件處理函數及何時觸發事件處理函數。

表2-6 常用的事件和事件處理函數

（2）在HTML中引用（指定）事件處理函數（函數的調用）

在HTML中指定事件處理程序，需要在HTML標記中添加相應的事件處理程序的屬性，并在其中指定作為屬性值的代碼或是函數名稱。使用格式如下。

    ＜標簽 各有關屬性及其屬性值on事件名稱="函數名稱(參數)"＞

【例2-3】通過input輸入標簽，引發單擊事件，該事件的處理函數名是onClick()，要完成的功能是通過函數test()實現的，而函數test()的功能是顯示一個提示窗口（由Windows的alert方法完成），并提示“事件引發一操作，并成功執行了這個操作！”。

這里采用在頁面中直接嵌入JavaScript代碼的實現方式，其主要代碼如下：

    ＜head＞
        ＜script language="javascript"＞
          function test(){ window.alert("事件引發一操作，并成功執行了這個操作！"); }
        ＜/script＞
    ＜/head＞
    ＜body＞
        ＜form action=""＞
          ＜input type="button" value="警告對話框" onclick="test()"＞＜br/＞
        ＜/form＞
    ＜/body＞

該程序的運行界面如圖2-3和圖2-4所示，當瀏覽器運行程序ch02_3.html時，首先顯示如圖2-3所示的頁面，但單擊“警告對話框”按鈕時，出現如圖2-4所示的提示對話框，單擊“確定”按鈕，該提示對話框消失。

圖2-3 【例2-3】運行界面

圖2-4 提示對話框

3.JavaScript的對象

JavaScript中設有瀏覽器的文檔對象：window、navigator、screen、history、location和document，利用這些對象，可以實現對網頁信息的操作和處理加工。

（1）window對象

HTML文檔內容在window對象中顯示，同時，window對象提供了用于控制瀏覽器窗口的方法。window對象屬性的常用方法如表2-7所示。

表2-7 window對象的常用方法

（2）location對象

location對象實現網頁頁面的跳轉。在JavaScript中，利用location對象實現頁面的自動跳轉。使用格式如下。

    window.location.href="網頁路徑";

（3）document對象

每個HTML文檔被加載后都會在內存中創建一個document對象，該對象存放整個網頁HTML內容，從中可獲取頁面表單的各種信息，并對這些信息進行操作加工處理。

假設有如下的表單。

獲取表單輸入域t1對象，代碼如下。

    var fObj=document.form1.t1;   //form1為表單的名稱，t1為某表單域的name值

獲取表單域的值。其中，fObj是表單域對象名，代碼如下。

    var v=fObj.value;

【例2-4】在【例2-2】中，已經設計了一個注冊頁面，在本例中，根據圖2-2（見【例2-2】）頁面所給出的不同信息的輸入要求，利用JavaScript進行表單數據有效性驗證，當不符合要求時，通過警告框給出提示，并重新輸入。

【分析】輸入表單的驗證就是對表單中輸入的數據進行檢驗，如果表單中輸入的數據不符合要求，則禁止提交，并給用戶適當的提示信息，以便用戶重新輸入。只有當所有輸入的數據都符合要求后，才允許提交，并進入表單標簽的action屬性所指定的處理程序，即：＜form action="提交后，進入的處理頁面"＞。

（1）由圖2-2可知，該注冊頁面需要驗證的表單輸入域和要求

● 用戶名：用戶名是否為空，是否符合規定的格式（用戶名由字母開頭，后跟字母、數字或下劃線！）。

● 密碼：密碼長度是否超過6位，兩次密碼輸入是否一致。

● 郵箱地址：郵箱地址必須符合郵箱格式。

（2）必須注意提交表單并實現輸入驗證的方式

一般使用“button類型”按鈕提交，“提交”時先執行“響應函數”。提交方式如下。

    ＜input type="button"  value="提交"  onClick="響應函數"＞

另外，在驗證函數中，當都滿足格式后，采用如下格式實現提交。

    document.forms[0].submit();      //forms[0]是指提交頁面中的第1個表單

【實現】所謂驗證輸入，就是編寫有關的Javascript函數，去驗證表單中各輸入域是否符合規定，若不符合規定，給出提示信息。為此，使用JavaScript編寫驗證函數，并形成文件：ch02_4.js，其代碼如下。

    function validate(){
        var name=document.forms[0].userName.value;    //獲取表單中userName輸入域的值
        var pwd=document.forms[0].userPwd.value;      //獲取表單中userPwd輸入域的值
        var pwd1=document.forms[0].userPwd1.value;    //獲取表單中userPwd1輸入域的值
        var email=document.forms[0].userEmail.value;    //獲取表單中userEmail輸入域的值
        var accept=document.forms[0].accept.checked;    //獲取表單中accept是否選中的值
        var regl=/ [a-zA-Z]\w*$ /;
        var reg2= / \w+([-+.＇]\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*$ /;
        if(name.length＜=0) alert("用戶名不能為空！");
        else if(! regl.test(name)) alert("用戶名格式不正確！");
        else if(pwd.length＜6) alert("密碼長度必須大于等于6位！");
        else if(pwd! =pwd1) alert("兩次密碼不一致！");
        else if(! reg2.test(email)) alert("郵件格式不正確！");
        else if(accept= =false) alert("您需要仔細閱讀并同意接受用戶使用協議！");
        else document.forms[0].submit();
    }

然后，修改頁面ch02_2.html，在標簽＜head＞＜/head＞中添加一行，導入js文件。

    ＜script language="javascript" src=" ch02_4.js"＞＜/script＞

最后，再將頁面的提交按鈕輸入域修改如下。

    ＜input type="Button" value="確認" onClick="validate()"/＞;

【運行測試】重新運行該頁面，當輸入項不符合要求時，就給出提示警告。

2.1.4 JSP技術與應用案例

JSP是一種動態網頁技術標準，它是在靜態網頁HTML代碼中加入Java程序片段（Scriptlet）和JSP標簽（tag），構成JSP網頁文件，其擴展名為．jsp。

1.JSP語法

JSP頁面是將JSP代碼放在＜%與%＞標簽中，然后嵌入到HTML代碼中而形成的。在＜%與%＞標簽中定義JSP元素的行為。

（1）JSP變量和方法的聲明

在JSP頁面中可以聲明變量和方法，聲明后的變量和方法可以在本JSP頁面的任何位置使用，并在JSP頁面初始化時被初始化。

    語法格式：＜%! 聲明變量、方法和類 %＞

（2）顯示JSP表達式的值

JSP的表達式是由變量和常量組成的算式，它將JSP生成的數值轉換成字符串嵌入HTML頁面，并直接輸出（顯示）其值。

    語法格式：＜%=表達式%＞

（3）JSP代碼段

JSP代碼段可以包含任意合法的Java語句，該代碼段在服務器處理請求時被執行。

    語法格式：＜% 符合java語法的代碼塊 %＞

（4）JSP注釋

在JSP程序中，為了增加JSP程序的可讀性，給出了注釋元素。

    語法格式1:＜%-- 要添加的文本注釋 --%＞
    語法格式2:＜! --要添加的文本注釋--＞
    語法格式3:＜%//要添加的文本注釋%＞或＜%/*要添加的文本注釋*/%＞

2.JSP指令元素

JSP指令標記在客戶端是不可見的，它是被服務器解釋并被執行的。

JSP指令的語法格式如下。

    ＜%@ 指令名稱 屬性1="屬性值1" 屬性2="屬性值2"… 屬性n="屬性值n"%＞

（1）page指令

page指令用來定義JSP頁面中的全局屬性，它描述了與頁面相關的一些信息，其作用域為它所在的JSP文件頁面及其包含的文件。其屬性如表2-8所示。

表2-8 page指令的主要屬性

（2）include指令

include指令稱為文件加載指令，可以將其他的文件插入JSP網頁，被插入的文件必須保證插入后形成的新文件符合JSP頁面的語法規則，include指令語法格式如下。

    ＜%@ include file="filename"%＞

其中：include指令只有一個file屬性，filename是指被包含的文件的名稱（相對路徑），被插入的文件必須與當前JSP頁面在同一Web服務目錄下。

3.JSP動作元素

JSP動作元素是用來控制JSP引擎的行為，JSP標準動作元素均以jsp為前綴，最常使用的有兩個。

● ＜jsp:include＞：在頁面得到請求時動態包含一個文件。

● ＜jsp:forward＞：引導請求進入新的頁面（轉向到新頁面）。

（1）＜jsp:include＞動作，語法格式如下。

    ＜jsp:include page="文件的名稱"/＞

功能：當前JSP頁面動態包含一個文件，即將當前JSP頁面和被包含的文件各自獨立編譯為字節碼文件。當執行到該動作標簽處，才加載執行被包含文件的字節碼。

提示：include動作與include指令所實現的兩種包含，程序的執行性質是完全不同的，一個是靜態包含，一個是動態包含，對于靜態包含不能傳遞參數，但對于動態包含可以在兩個文件之間傳遞參數。

（2）＜jsp:forward＞

動作＜jsp:forward＞用于停止當前頁面的執行，轉向另一個頁面，語法格式如下。

    ＜jsp:forward page="文件的名稱"/＞

4.JSP內置對象

在JSP中為了便于數據信息的保存、傳遞和獲取等操作，專門設置了9個內置對象，如表2-9所示。JSP內置對象是指它們是預先設定的，無需創建，每個對象都有自己的屬性和方法，在編寫JSP代碼時可以直接使用。

表2-9 JSP內置對象

（1）request對象的常用方法

request對象的各種方法主要用來處理客戶端瀏覽器提交的請求信息，以便做出相應的處理。主要的方法如表2-10所示，在后面幾節中會給出這些方法的使用案例。

表2-10 request對象的主要方法

（2）response對象的常用方法

response對象提供了頁面重定向（sendRedirect）方法、設置狀態行（setStatus）方法和設置文本類型（setContentType）方法等。主要方法如表2-11所示。

表2-11 response對象的常用方法

（3）session對象的主要方法

session對象的主要作用是存儲并獲取用戶會話信息。其主要方法如表2-12所示。

表2-12 session對象主要方法

【例2-5】設計一個網上答題及其自動評測系統。本案例設計一個簡單的網上答題與評測系統，其運行界面如圖2-5所示。該程序包括兩部分，首先是試題頁面的設計及解答的提交，其次是當提交解答后，系統自動評閱并給出評閱結果。圖2-5a是試題頁面，圖2-5b是評閱后給出的解答頁面。

圖2-5 【例2-5】的運行界面

a) 試題頁面b) 評閱后給出的解答頁面

【分析】該案例的設計需要設計兩個JSP頁面：一個是提交信息頁面，另一個是獲取提交信息并進行處理顯示結果頁面。其設計關鍵有以下兩點。

1）對于互斥的單選框、只允許單選的列表框，只傳遞一個參數。

2）對于復選框、可多選列表框，需傳遞多個參數，通過數組保存并獲取參數值。

【代碼編寫】

1）提交信息頁面程序：ch02_5_input.jsp，其主要代碼如下。

    ＜body＞
      ＜form action="ch02_5_show.jsp" method="post"＞
        一、 2+3=? ＜br＞
        ＜input type="radio" name="r1" value="2" checked="checked"＞2&nbsp;
        ＜input type="radio" name="r1" value="3"＞3&nbsp; &nbsp;
        ＜input type="radio" name="r1" value="4"＞4 &nbsp;
        ＜input type="radio" name="r1" value="5"＞5＜br＞
        二、下列哪些是偶數？＜br＞&nbsp; &nbsp;
        ＜input type="checkbox" name="c1" value="2"＞2 &nbsp;
        ＜input type="checkbox" name="c1" value="3"＞3 &nbsp;
        ＜input type="checkbox" name="c1" value="4"＞4 &nbsp;
        ＜input type="checkbox" name="c1" value="5"＞5＜br＞
        三、下列哪些是動態網頁？＜br＞&nbsp; &nbsp;
        ＜select size="4" name="list1" multiple="multiple"＞
          ＜option value="asp"＞ASP＜/option＞
          ＜option value="php"＞PHP＜/option＞
          ＜option value="htm"＞HTML＜/option＞
          ＜option value="jsp"＞JSP＜/option＞
          ＜option value="xyz" selected="selected"＞xyz＜/option＞
        ＜/select＞＜br＞
        四、下列組件哪個是服務器端的？＜br＞&nbsp; &nbsp;
        ＜select size="1" name="list5"＞
          ＜option value="jsp"＞JSP＜/option＞
          ＜option value="servlet"＞SERVLET＜/option＞
          ＜option value="java"＞JAVA＜/option＞
          ＜option value="jdbc"＞JDBC＜/option＞
        ＜/select＞＜br＞
        五、在服務器端用來接受用戶請求的對象是：
        ＜input type="text" size="20" name="text1"＞＜br＞
        ＜div align="left"＞
          ＜input type="submit" value="提交" name="button1"＞
          ＜input type="reset" value="重置" name="button2"＞
        ＜/div＞
      ＜/form＞
    ＜/body＞

2）獲取提交信息并進行處理頁面：ch02_5_show.jsp，其主要代碼如下。

    ＜body＞
      ＜% String s1 = request.getParameter("r1");
        if (s1 ! = null) {
            out.println("一、解答為：2+3="+s1+"   ");
            if (s1.equals("5")) out.println("正確！" + "＜br＞");
        else out.println("錯誤！" + "＜br＞");
        } else out.println("一、沒有解答！");
        out.println("---------------------------＜br＞");
        String[] s21 = request.getParameterValues("c1");
        if (s21 ! = null) {
          out.println("二、解答為：偶數有：");
          for(int i=0; i＜s21.length; ++i){out.println(s21[i]+"   "); }
          if (s21.length = = 2 && s21[0].equals("2") && s21[1].equals("4"))
              { out.println("正確！" + "＜br＞"); }else{out.println("錯誤！" + "＜br＞"); }
        } else{out.println("二、沒有解答！"); }
        out.println("---------------------------＜br＞");
        String[] s31 = request.getParameterValues("list1");
        if (s31 ! = null) {
          out.println("三、解答為：動態網頁有：");
          for(int i=0; i＜s31.length; ++i){out.println(s31[i]+"   "); }
          if (s31.length = = 3 && s31[0].equals("asp") && s31[1].equals("php")
                && s31[2].equals("jsp"))
                {out.println("正確！" + "＜br＞"); }else{out.println("錯誤！" + "＜br＞"); }
        } else out.println("三、沒有解答！");
        out.println("---------------------------＜br＞");
        String s4 = request.getParameter("list5");
        if (s4 ! = null) {
            out.println("四、解答為：服務器端的組件是有："); out.println(s4+"   ");
            if(s4! =null&&s4.equals("servlet"))  out.println("正確！"+"＜br＞");
            else  out.println("錯誤！"+"＜br＞");
        }else  ut.println("四、沒有解答！");
        out.println("---------------------------＜br＞");
        String s5 = request.getParameter("text1");
        if (s5 ! = null) {
            out.println("五、解答為："); out.println(s5+"   ");
            if (s5 ! = null && s5.equals("request")) out.println("正確！" + "＜br＞");
            else out.println("錯誤！" + "＜br＞");
          } else out.println("五、沒有解答！");
          out.println("---------------------------＜br＞");
      %＞
    ＜/body＞

【運行測試】運行頁面程序ch02_5_input.jsp，當提交后，給出結果顯示。

思考：基于該題目的設計思想，設計5套真實網上考試試題，并都給出評測及其評判結果。

2.1.5 EL表達式與應用案例

在Web程序設計中，利用EL表達式，可以直接計算并顯示表達式的值，簡化了JSP網頁的設計。

1.EL的語法形式

所有的EL都是以“${”開始，以“}”結尾的，語法格式如下。

    ${expression}

功能：在頁面上顯示表達式expression的值。

2．存取運算符

在EL中，對數據值的存取是通過“[]”或“.”實現的。其格式如下。

    ${name.property}   或  ${name["property"]}  或   ${name[property]}

說明：

1）“[]”主要用來訪問數組、列表或其他集合對象的屬性。

2）“.”主要用于訪問對象的屬性。

3.EL運算符

EL支持的運算符和Java語言運算符類似，主要有算術運算符、關系運算符和邏輯運算符等，如表2-13所示。

表2-13 EL中的運算符

4.EL內部對象

EL提供了11個可直接使用的內部對象，如表2-14所示。

表2-14 EL內部對象

【例2-6】設計兩個JSP頁面，實現如圖2-6所示的顯示結果。其中，form.jsp是提交信息的頁面，在doSubmit.jsp頁面中通過param和paramValues對象獲取form.jsp頁面提交的信息并顯示。

圖2-6 【例2-6】顯示結果

a) 提交信息頁面b) 顯示提交信息頁面

1）提交信息頁面：form.jsp，其主要代碼如下。

    ＜body＞
        ＜form action="doSubmit.jsp" method="post"＞
          姓名 ＜input type="text"name="name"＞＜br/＞
          性別 ＜input type="text"name="sex"＞＜br/＞
          語言 ＜input type="text"name="lang"＞＜br/＞
          電話 ＜input type="text"name="regTelephone"＞＜br/＞
          郵件 ＜input type="text"name="email"＞＜br/＞
          簡介＜textarea rows="2" cols="30" name="intro"＞＜/textarea＞＜br/＞＜br＞
          愛好：音樂＜input type="checkbox" name="aihao" value="音樂"/＞
                籃球＜input type="checkbox" name="aihao" value="籃球"/＞
                足球＜input type="checkbox" name="aihao" value="足球"/＞＜br/＞＜br＞
          ＜input type="submit" value="提交"/＞&nbsp; ＜input type="reset" value="重置"/＞
      ＜/form＞
    ＜/body＞

2）獲取表單信息并顯示信息頁面：doSubmit.jsp，其主要代碼如下。

    ＜body＞
        ＜h2＞您提交的內容如下：＜/h2＞
        ＜% request.setCharacterEncoding("utf-8"); %＞
          姓名：${param.name}＜br/＞   性別：${param.sex}＜br/＞
          外語：${param.lang}＜br/＞    電話：${param.regTelephone}＜br/＞
          email:${param.email}＜br/＞  個人簡介：${param.intro}＜br/＞
          愛好：${paramValues.aihao[0]} ${paramValues.aihao[1]} ${paramValues.aihao[2]}
    ＜/body＞

3）運行form.jsp，按照圖2-6a中所示輸入數據并提交，顯示如圖2-6b所示的結果。

官术网_书友最值得收藏!