第7章　PHP與Web交互

（視頻講解：1小時40分鐘）

PHP與Web頁面交互是學習PHP語言編程的基礎。在PHP中提供了兩種與Web頁面交互的方法，一種是通過Web表單提交數據，另一種是通過URL參數傳遞。本章將詳細講解PHP與Web頁面交互的相關知識，為以后學習PHP語言編程做好鋪墊。

學習摘要：

Web工作原理

HTML表單

CSS美化表單頁面

JavaScript表單驗證

PHP獲取表單數據

7.1　Web工作原理

當用戶瀏覽網頁時，會打開瀏覽器，輸入網址后按Enter鍵，然后瀏覽器中就會顯示出想要瀏覽的內容。在這個看似簡單的用戶行為背后，到底隱藏了些什么呢？

7.1.1　HTTP協議

超文本傳輸協議（HyperText Transfer Protocol，HTTP）是互聯網上應用最為廣泛的一種網絡協議。所有的WWW文件都必須遵守這個標準。設計HTTP最初的目的是為了提供一種發布和接收HTML頁面的方法。

HTTP是一個客戶端和服務器端請求和應答的標準（TCP）。客戶端指的是終端用戶，服務器端指的是服務器上的網站。通過使用Web瀏覽器、網絡爬蟲或者其他的工具，客戶端發起一個到服務器上指定端口（默認端口為80）的HTTP請求，基本原理如圖7.1所示。

在客戶端向服務器端發起請求時，常用的請求方法如表7.1所示。

在PHP與Web交互時，最常用的就是GET和POST兩種方式。

7.1.2　Web工作原理

遵循HTTP，就可以向服務器發送請求，并接收消息。這中間又經歷了哪些過程呢？ Web工作原理可以簡化為8個步驟，如圖7.2所示。

下面就詳細介紹每一個步驟。

（1）用戶在瀏覽器中輸入網址，如www.mingrisoft.com，瀏覽器會去請求DNS服務器，DNS（Domain Name System）是“域名系統”的英文縮寫，是一種組織成域層次結構的計算機和網絡服務命名系統，它用于TCP/IP網絡，它從事將主機名或域名轉換為實際IP地址的工作。DNS就是這樣的一位“翻譯官”，將www.mingrisoft.com翻譯成IP地址101.201.120.85。

（2）DNS服務器將翻譯過來的IP地址101.201.120.85傳遞給瀏覽器。

（3）瀏覽器通過IP地址找到IP對應的Web服務器（通常是Apache或者Nginx），建立TCP連接，向服務器發送HTTP Request（請求）包。

（4）Web服務器發現用戶訪問了后綴為php的文件，如index.php文件，那么服務器就會訪問PHP解析引擎。

（5）PHP在解析時，發現需要使用數據庫。于是，連接數據庫，訪問數據庫服務器（可能是MySQL、SQL Server、Oracle等）。

（6）數據庫根據查詢條件查找數據，并將數據返回給PHP解析引擎。

（7）PHP解析引擎拼接數據，解析成HTML，返回給Web服務器。

（8）Web服務器將HTML文件返回給瀏覽器，瀏覽器開始解析HTML文件，此時，用戶在瀏覽器中就看到訪問的網站內容。

7.2　HTML表單

7.2.1　HTML簡介

HTML是用來描述網頁的一種語言。HTML指的是超文本標記語言（Hyper Text Markup Language），它不是一種編程語言，而是一種標記語言。標記語言是一套標記標簽，這種標記標簽通常被稱為HTML標簽，它們是由尖括號包圍的關鍵詞，如＜html＞。HTML標簽通常是成對出現的，如＜h1＞和＜/h1＞。標簽對中的第一個標簽是開始標簽，第二個標簽是結束標簽。Web瀏覽器的作用是讀取HTML文檔，并以網頁的形式顯示出它們。瀏覽器不會顯示HTML標簽，而是使用標簽來解釋頁面的內容，如圖7.3所示。

在圖7.3中，左側是HTML代碼，右側是顯示的頁面內容。HTML代碼中，第一行的＜!DOCTYPE html＞表示使用的是HTML5（最新HTML版本），其余的標簽都是成對出現，并且在右側的頁面中，只顯示標簽中的內容，不顯示標簽。

那么，該如何創建一個HTML文件呢？當然，可以先創建一個文本文檔，然后將后綴名．txt格式更改為．html。但是．txt文件默認編碼格式為ANSI，而PHP編碼規范要求使用UTF-8，這就需要更改文件編碼格式。下面介紹如何使用PhpStorm創建HTML文件。

創建一個HTML文件，將其命名為index.html。在index.html文件中，編寫HTML代碼。具體步驟如下。

（1）使用PhpStorm創建index. html文件。

在D:\phpstudy\WWW路徑下創建Code文件夾，打開PhpStorm，選擇Code文件夾。在Code文件下創建index.html文件，步驟如圖7.4和圖7.5所示。

（2）編寫HTML代碼。

創建完成后，編輯器默認生成了基本的HTML5代碼結構。在＜body＞和＜/body＞標簽內編寫HTML代碼，具體代碼如下：

（3）查看運行結果如圖7.6所示。

7.2.2　HTML表單

為了實現瀏覽器和服務器的互動，可以使用HTML表單搜集不同類型的用戶輸入，將輸入的內容從客戶端的瀏覽器傳送到服務器端，經過服務器上的PHP程序進行處理后，再將用戶所需要的信息傳遞回客戶端的瀏覽器上，從而獲得用戶信息，使PHP與Web實現交互。HTML表單形式很多，如用戶注冊、登錄、發布文章等頁面。

在HTML中，使用＜form＞元素，即可創建一個表單。表單結構如下：

＜form＞元素的屬性如表7.2所示。

7.2.3　表單元素

表單（form）由表單元素組成。常用的表單元素有以下幾種：輸入域元素＜input＞、選擇域元素＜select＞和＜option＞、文字域元素＜textarea＞等。

1．輸入域元素＜input＞

輸入域元素＜input＞是表單中最常用的元素之一。常用的文本框、按鈕、單選按鈕、復選框等構成了一個完整的表單。

語法格式如下：

參數name是指輸入域的名稱，參數type是指輸入域的類型。在＜input type=““＞元素中一共提供了10種類型的輸入區域，用戶所選擇使用的類型由type屬性決定。type屬性取值及舉例如表7.3所示。

2．選擇域元素＜select＞和＜option＞

通過選擇域元素＜select＞和＜option＞可以建立一個列表或者菜單。菜單的使用是為了節省空間，正常狀態下只能看到一個選項，單擊右側的倒三角按鈕，打開菜單后才能看到全部的選項。列表可以顯示一定數量的選項，如果超出了這個數量，會自動出現滾動條，瀏覽者可以通過拖動滾動條來查看各選項。

語法格式如下：

其中參數name表示選擇域的名稱；參數size表示列表的行數；參數value表示菜單選項值；參數multiple表示以列表方式顯示數據，省略則以菜單方式顯示數據。

選擇域元素＜select＞和＜option＞的顯示方式及舉例如表7.4所示。

3．文字域元素＜textarea＞

文字域元素＜textarea＞用來制作多行的文字域，可以在其中輸入更多的文本。語法格式如下：

其中參數name表示文字域的名稱；rows表示文字域的行數；cols表示文字域的列數（這里的rows和cols以字符為單位）；value表示文字域的默認值，warp用于設定顯示和送出時的換行方式，值為off表示不自動換行，值為hard表示自動硬回車換行，換行標記一同被發送到服務器，輸出時也會換行，值為soft表示自動軟回車換行，換行標記不會被發送到服務器，輸出時仍然為一列。

文字域元素＜textarea＞的值及舉例如表7.5所示。

7.3　CSS美化表單頁面

7.3.1　CSS簡介

CSS（Cascading Style Sheets，層疊樣式表），是一種標記語言，用于為HTML文檔定義布局。例如，CSS涉及字體、顏色、邊距、高度、寬度、背景圖像、高級定位等方面。運用CSS樣式可以讓頁面變得美觀，就像化妝前和化妝后的效果一樣，如圖7.7所示。

7.3.2　插入CSS

在HTML文件中插入CSS有3種方式。

1．行內樣式表

行內樣式表就是使用HTML屬性style，在style屬性內添加CSS。具體代碼如下：

運行結果如圖7.8所示。

2．內部樣式表

內部樣式表即在HTML文件內使用＜style＞元素，在文檔頭部＜head＞元素內定義內部樣式表，具體代碼如下：

運行結果與圖7.8相同。

3．外部樣式表

外部樣式表是一個擴展名為．css的文本文件。跟其他文件一樣，我們可以把樣式表文件放在Web服務器上或者本地硬盤上。例如，在test文件目錄下有兩個文件index.html和css文件夾。創建一個CSS文件，命名為default.css，存放于css文件夾中。目錄結構如圖7.9所示。

那么，如何在一個index.html文檔中引用一個外部樣式表文件（default.css）呢？答案是：在index. html中創建一個指向外部樣式表文件的鏈接（link）即可，語法格式如下：

首先，編寫default.css文件代碼，即把原index.html內部的CSS代碼單獨寫入default.css文件中，default.css文件具體代碼如下：

然后，在index.html文件中使用＜link＞標簽引入default.css外部CSS文件。注意，要在href屬性中給出樣式表文件的地址。這行代碼必須被插入HTML代碼的頭部（header），即放在標簽＜head＞和標簽＜/head＞之間。index.html文件完整代碼如下：

運行結果如圖7.8所示。

7.3.3　使用CSS美化表單頁面

應用HTML表單，并使用CSS美化表單，創建一個模擬京東的商城注冊頁面。

【例7.01】　創建一個HTML文件，命名為register.html，該頁面中包含一個注冊表單。表單包含“郵箱”“密碼”“確認密碼”“手機號”和“是否同意服務協議”。在register.html文件中，使用＜link＞標簽引入2個外部樣式表文件basic.css和login.css。代碼如下：（實例位置：資源包\源碼\07\7.01）

運行結果如圖7.10所示。

7.4　JavaScript表單驗證

7.4.1　JavaScript簡介

通常，我們所說的前端就是指HTML、CSS和JavaScript 3項技術，它們的作用分別如下。

HTML：定義了網頁的內容。

CSS：描述了網頁的布局。

JavaScript：描述了網頁的行為。

JavaScript是一種可以嵌入在HTML代碼中由客戶端瀏覽器運行的腳本語言。在網頁中使用JavaScript代碼，不僅可以實現網頁特效，還可以響應用戶請求實現動態交互的功能。例如，在用戶注冊頁面中，需要對用戶輸入信息的合法性進行驗證，包括是否填寫了“郵箱”和“手機號”，填寫的“郵箱”和“手機號”格式是否正確等。JavaScript驗證郵箱是否為空的效果如圖7.11所示。

7.4.2　調用JavaScript

1．在HTML中嵌入JavaScript腳本

JavaScript作為一種腳本語言，可以使用＜script＞元素嵌入到HTML文件中。

語法格式如下：

例如，在HTML文件中嵌入JavaScript腳本。這里直接在＜script＞和＜/script＞標簽中間寫入JavaScript代碼，用于彈出一個提示對話框，代碼如下：

在上面的代碼中，＜script＞與＜/script＞標簽之間調用JavaScript腳本語言window對象的alert方法，向客戶端瀏覽器彈出一個提示對話框。運行結果如圖7.12所示。

2．應用JavaScript事件調用自定義函數

在Web程序開發過程中，經常需要在表單元素相應的事件下調用自定義函數。例如，在按鈕的單擊事件下調用自定義函數check（）來驗證表單元素是否為空，代碼如下：

然后在該表單的當前頁中編寫一個check（）自定義函數，在該函數內實現驗證是否為空。

3．引用外部JavaScript文件

在網頁中，除了可以在＜script＞與＜/script＞標簽之間編寫JavaScript腳本代碼，還可以通過＜script＞元素中的src屬性指定外部的JavaScript文件（即JS文件，以．js為擴展名）的路徑，從而引用對應的JS文件。該方式與引用外部CSS文件類似。

語法格式如下：

其中，url是JS文件的路徑。使用外部JS文件的優點如下：

使用JS文件可以將JavaScript腳本代碼從網頁中獨立出來，便于代碼的閱讀。

一個外部JS文件，可以同時被多個頁面調用。當共用的JavaScript腳本代碼需要修改時，只需要修改JS文件中的代碼即可，便于代碼的維護。

通過＜script＞元素中的src屬性不但可以調用同一個服務器上的JS文件，還可以通過指定路徑來調用其他服務器上的JS文件。

7.4.3　JavaScript表單驗證

應用JavaScript事件調用自定義函數，檢測商城注冊頁面的輸入信息。

【例7.02】　使用例7.01中的代碼，在register.html文件中添加JavaScript驗證的代碼。首先給register.html頁面中的“注冊”按鈕添加onclick單擊事件，調用自定義函數mr_verify（）。然后，在函數體內實現表單驗證功能。代碼如下：（實例位置：資源包\源碼\07\7.02）

當輸入錯誤的手機號格式，運行結果如圖7.13所示。注冊成功如圖7.14所示。

7.5　PHP獲取表單數據

HTML表單已經準備就緒，接下來就要提交表單，并且獲取表單數據。提交表單，即是將表單信息從客戶端提交到服務器端，這時需要使用HTTP的請求方法，本節中只講解最常用的POST方法和GET方法，采用哪種方法是由HTML文件中＜form＞元素的method屬性所指定的。服務器接收請求信息，這時服務器端語言PHP閃亮登場。

PHP接收數據的方式非常簡單，如果客戶端使用POST方式提交，提交的表單域代碼如下：

上述代碼中，使用$_POST［'username'］接收＜input＞元素中name屬性為username的值，$_ POST［'username'］的值為“張三”。

如果以GET方式提交，則使用$_GET［'username'］接收，如圖7.15所示。

7.5.1　獲取POST方式提交的表單數據

應用POST方式時，只需將＜form＞元素中的屬性method設置成POST即可。POST方式不依賴于URL，不會顯示在地址欄。POST方式可以沒有限制地傳遞數據到服務器，所有提交的信息在后臺傳輸，用戶在瀏覽器端是看不到這一過程的，安全性高。所以POST方式比較適合用于發送保密的（如賬號密碼）或者容量較大的數據到服務器。

【例7.03】　獲取商城注冊頁面的輸入信息。（實例位置：資源包\源碼\07\7.03）

在例7.02商城注冊頁面中，使用POST方式將表單數據提交到addUser.php文件中，在該文件中接收表單數據并顯示數據內容。具體步驟如下。

（1）修改register.html文件，使用POST方式提交表單數據，主要代碼如下：

（2）創建addUser.php文件，接收表單數據，完整代碼如下：

在瀏覽器中輸入http://localhost/Code/SL/07/03/register.html，按Enter鍵，進入商城注冊頁面，在表單中輸入相應信息，單擊“注冊”按鈕，輸出用戶注冊信息。

操作過程如圖7.16所示。

7.5.2　獲取GET方式提交的表單數據

GET方式是＜form＞元素中method屬性的默認方法。使用GET方式提交的表單數據被附加到URL后，作為URL的一部分發送到服務器端。在程序的開發過程中，由于GET方式提交的數據是附加到URL上發送的，因此，在URL的地址欄中將會顯示“URL+用戶傳遞的參數”。

GET方式的傳參格式如圖7.17所示。

其中，url為表單響應地址（如localhost/index. php），name1為表單元素的名稱，value1為表單元素的值。url和表單元素之間用“?”隔開，而多個表單元素之間用“&”隔開，每個表單元素的格式都是name=value，固定不變。

【例7.04】　創建一個表單來實現應用GET方式提交用戶名和密碼，并顯示在URL地址欄中。添加一個文本框，命名為user，添加一個密碼域，命名為pwd，將表單的method屬性設置為GET方式，代碼如下：（實例位置：資源包\源碼\07\7.04）

運行本實例，在文本框中輸入用戶名“明日科技”和密碼mrsoft，單擊“提交”按鈕，文本框內的信息就會顯示在URL地址欄中，如圖7.18所示。

顯而易見，這種方法會將參數暴露。如果用戶傳遞的參數是非保密性的參數（如id=8），那么采用GET方式傳遞數據是可行的，如果用戶傳遞的是保密性的參數（如密碼），這種方法就會不安全。而使用POST方式則更為安全。

7.6　小結

本章內容涉及知識比較廣泛，既有前端HTML、CSS和JavaScript技術，又有后端PHP使用兩種方式接收表單數據的知識。相信讀者在學習完本章后，可以對表單應用自如，從而輕松實現“人機交互”。掌握了本章的技術要點，就意味著已經有了開發動態網頁的能力，為下一步的深入學習奠定了良好的基礎。

7.7　實戰

7.7.1　輸出用戶填寫的信息

實例位置：資源包\源碼\07\實戰\01

創建一個填寫個人信息的頁面user.html，使用POST方式提交到update.php，在update.php文件中，輸出用戶填寫的信息，如圖7.19所示。

7.7.2　輸出用戶填寫的登錄信息

實例位置：資源包\源碼\07\實戰\02

創建一個用戶登錄頁面login.html，使用POST方式提交到checkLogin.php，在checkLogin.php文件中，輸出填寫的登錄信息，如圖7.20所示。

7.7.3　輸出明日學院用戶id

實例位置：資源包\源碼\07\實戰\03

在明日學院網站的用戶列表中，用戶單擊“編輯”按鈕，瀏覽器將使用GET方式發送請求，并且傳遞用戶id到editUser.php文件。在editUser.php文件中，輸出用戶id，如圖7.21所示。試著實現該功能。