前後端開發(2):瀏覽器與PHP程序的交互

上一節介紹怎麼在mac電腦上啓用PHP程序,並且演示了一個簡單的例子,這個例子運行時,涉及了瀏覽器、apache以及PHP程序的交互,這三者的關係大概是這樣的:
PHP程序的位置

一般來說,瀏覽器(或者類似功能的程序)給apache(或者其它服務器)發送的數據稱作“表單”,表單就相當一個“界面”,小程覺得從“界面”入手去理解交互的流程是一個可行的辦法。

本文介紹如何提交一個表單,以及引發的相應交互。 那麼,在瀏覽器上點擊一個“按鈕”,會引發什麼樣的交互行爲呢?

(一)交互一,瀏覽器給apache發送數據

瀏覽器以表單的形式給apache發送數據。

表單的標籤是:,比如下面一個html頁面,留意裏面標籤的內容:

<html>
<meta charset="utf-8">
<body>
<form action="login.php" method="post">
暱稱:<input type="text" name="name">
口號:<input type="text" name="slogan">
<input type="submit" value="提交">
</form>
</body>
</html>

html頁面(相當於整體的界面),包括中的內容,由瀏覽器來解析。比如上面的這個html頁面,解析後的樣子是這樣的:
一個簡單的表單界面

可以看到,有兩個文本輸入框,還有一個提交按鈕。

如果瀏覽器只做解析顯示的工作,那就沒有apache跟PHP程序什麼事情了。實際上,瀏覽器經常要把數據發送給apache,而發送的數據就是標籤(即表單)的數據。

表單數據,可以在標籤中找到,其中可以包括按鈕、下拉菜單、文本輸入框等等元素。比如上面那個表單:
表單中的元素

注意,上面的表單,還把PHP代碼文件發給了apache,如果項目目錄(默認是/Library/WebServer/Documents)下面沒有這個php文件,那麼在點擊提交按鈕後,會看到這樣的提示:
找不到php文件

那麼,發送的時機是什麼?即瀏覽器在什麼時候發送表單數據給apache?

在點擊“submit”類型的按鈕的時候觸發發送。如果沒有submit按鈕,則需要通過js主動觸發表單的submit事件。

另外,在發送的method上,區分爲get與post方式。

get方法,表單的所有信息都出現在請求的url中(在地址欄上可以看到),對於長度也有限制。比如,這樣的get請求:

http://localhost/formtest.html?name=abc&slogan=hello+world

其中name與slogan是鍵(key),而abc與hello world是對應的值(value),表單的數據就是鍵值對的集合。

post方法,請求時不會顯示錶單的任何數據,對於長度限制也很弱。

(二)交互二,PHP代碼訪問表單的內容

表單中可以指定把項目目錄中的php文件的內容(或者當前的腳本–比如既有表單又有php代碼)提交給apache。apache在拿到php代碼後,會交由PHP程序來處理,而這些php代碼很可能需要訪問表單的內容,比如login.php代碼中,需要訪問表單中的文本框的內容,那如何訪問呢?

表單的內容(鍵值對的集合),會保存在$_GET變量(get方法時)或$_POST變量(post方法時)中,這個在apache調用PHP程序時就初始化好。

所以,PHP代碼可以通過訪問$_GET或$_POST變量來訪問表單的內容。

比如,login.php的代碼可以這樣寫:

<meta charset="utf-8">
你好,<?php echo $_GET["name"]; ?>! <br>
你的口號是:<?php echo $_GET["slogan"];?> !

再次提交這個表單時,在瀏覽器上可以看到這樣的提示:
訪問表單內容後的輸出

明顯,還要區分是用$_GET還是$_POST是麻煩的,這時,可以使用$_REQUEST變量來訪問,$_REQUEST對於get或post方式都適用。

應該留意到,PHP程序解析出結果後,把結果返回給apache,apache返回html頁面給瀏覽器,最終瀏覽器顯示結果。

總結一下,本文從一個簡單表單請求的例子入手,介紹了表單的概念,以及請求過程中涉及到的兩個重要的交互,並引出了$_REQUEST等變量的使用。


slogan

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章