小叮噹～隨手記: PHP 語法入門-4～html php 表單傳送與接收資料

要明白網頁html及php 表單傳送與接收的方法，首先要知道其運作原理，下面先來一張示意圖，然後做一個分析，下面有三種傳遞接收表單的模式：
formpage

照上表，我們大致區分這三種傳遞方式，先來看看優缺點分析：

A → B B輸出	A → A A輸出	A →(js jquery)→PHP再回傳 A輸出 ( 目前主流方式 )
優點：不須考慮頁面瀏覽器支援度	優點：不須考慮頁面瀏覽器支援度	優點：傳遞數據資料時，良好的即時訊息顯示
缺點：即時訊息可能必須往返來回頁面穿梭	缺點：在程式碼上，須要考慮更多問題產生	缺點：須考慮到瀏覽器的支援度，若支持度不足，則造成頁面根本沒任何反應

上述簡單分析表單在傳遞數據與接收數據時的優缺點，這僅是小學生個人小小的觀點，不管使用那種方式，其實程式的內容與便利性和易讀性，才是佔了最大的成份所在。

先談談表單傳送數據時使用的傳遞方式：方法有兩種，get 與 post ，我們可以在 html 表單上面看到像這樣的語法：

<form action="接收資料的程式" method="get"> ... 表單內容...</form>

<form action="接收資料的程式" method="post">...表單內容...</form>

來看看 get 與 post 傳遞資料的區別：

	GET	POST
網址	網址列可以明顯看到傳遞的資料內容	無法由網址列看到
資料傳遞量	大約1024字節	2M
安全性	較低	較高
效率	較高	較低
較常被用來傳遞的資料	比較無關痛癢的資料(會癢的一般會加密處理) 好比：頁面的分頁網址、頁面的標題等等	很癢的資料好比：帳號、密碼

我們先來看看下面範例，送出表單後的網址及內容變化：
首先，新增一頁HTML頁面命名為 a.html 內容如下：

a.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>登入</title>

</head>

<body>

<form action="b.php" method="get">

  GET傳送<br>

  姓名：

  <input name="user_name" type="text">

  密碼：<input name="user_pass" type="password">

  <input name="submit" type="submit" value="login">

</form>

<form action="b.php" method="post">

  POST傳送<br>

  姓名：

  <input name="user_name" type="text">

  密碼：<input name="user_pass" type="password">

  <input name="submit" type="submit" value="login">

</form>

</body>

</html>

上例HTML表單包含兩種傳遞模式(get與post)接下來，使用接收表單命令的 PHP 語法：

$_GET();
或
$_POST();

再來建立一頁PHP程式碼頁面，用以接收 a.html 頁面傳遞過去的資料，將 php 命名為 b.php 程式碼內並添加簡單判斷式，內容如下：

b.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

<?php

//判斷 $_GET 內容

if($_GET){

 echo '使用了<font color="red">get</font>方式傳遞資料,請看「<font color="red">網址列</font>」上顯示的網址內容<br /><br />';

 if($_GET['user_name']!=''){echo '姓名:'.$_GET['user_name'].'<br />';}else{echo '無名氏<br />';}

 if($_GET['user_pass']!=''){echo '密碼:'.$_GET['user_pass'].'<br />';}else{echo '無密碼<br />';}

 echo '<p style="color:red">送出的資料將會是以「陣列」方式儲存在 $_GET 變數當中，<br />可使用 var_dump($_GET) 或 print_r($_GET) 涵數查詢內容如下:</p>';

 echo '<p>';

 var_dump($_GET);

 echo '</p>';

}

if($_POST){

 echo '使用了<font color="red">post</font>方式傳遞資料,<br />「<font color="red">網址列</font>」上不會顯示傳遞的資料訊息<br /><br />';

 if(!empty($_POST['user_name'])){echo '姓名:'.$_POST['user_name'].'<br />';}else{echo '無名氏<br />';}

 if(!empty($_POST['user_pass'])){echo '密碼:'.$_POST['user_pass'].'<br />';}else{echo '無密碼<br />';}

 echo '<p style="color:red">送出的資料將會是以「陣列」方式儲存在 $_POST 變數當中，<br />因此可使用 var_dump($_POST) 或 print_r($_POST) 涵數查詢內容如下:</p>';

 echo '<p>';

 print_r($_POST);

 echo '</p>';

}

echo '<p><a href="a.html">返回</a></p>';

將此兩頁面，放置與本機相同的資料夾內，開啟 a.html 頁面做測試，點擊 login 鍵，查看頁面顯示的說明，請注意兩個接收頁面的判斷式稍微有些不同處。

a.html 內的第一個表單內容

<form action="b.php" method="get">
姓名：<input name="user_name" type="text" />
密碼：<input name="user_pass" type="password" />
<input name="submit" type="submit" value="login" /></form>

表單內的語法
action="b.php" 表示此表單將傳送到 b.php 程式處理
method="get" 使用 get 方式傳遞數據給 b.php 程式
name="user_name" 此為欄位名稱（每個欄位皆須定義一個名稱，否則表單無法接受到資料）

以此欄位而言，送出的資料就會以 $_GET =['user_name' =>'欄位輸入之資料']; 這種陣列型態儲存於 $_GET 陣列內，以供程式讀取，因此我們要讀取 user_name 之資料內容時，則使用 $_GET['user_name'] 取出的資料就是元素值，也就是在姓名欄內所填寫的資料

若以 post 傳遞資料時，則會以 $_POST =['user_name' =>'欄位輸入之資料']; 這樣儲存於陣列中，道理同上，以 $_POST['user_name']; 讀出資料。

同理可證 $_GET['user_pass'] 即為表單中(get傳遞資料方式)，訪客所輸入的密碼資料
而 $_POST['user_pass'] 即為表單中（post傳遞資料方式），訪客所輸入的密碼資料

接收表單的 b.php 程式，是用來處理 a.html 傳遞過來的資料使用，這裡僅用很簡單的判斷式處理

if(　$_GET['user_name']　!= ''){echo '姓名:'.$_GET['user_name'].'<br />';}else{echo '無名氏';}

此判斷式意思為：如果 $_GET['user_name'] 之內容(元素值）不等於（!=)　空字串('') 則顯示出姓名欄位 $_GET['user_name']的元素值資料，否則在螢幕顯示出無名氏

下面這段代碼是 a.html 傳送資料到 b.php 頁面的另一個簡單範例，範例會自動變化所選擇的影片內容，因影片是直接引用 youtube 影片內坎語法，因此在測試時，請保持網路連線，才可看到影片喔！

請將下面代碼存成 a.html 放置於 C:\AppServ\www\a.html
啟動 Apache 伺服器

a.html

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>影片</title>

</head>

<body>

<form action="b.php" method="get">

  GET傳送<br>

  <select name="select_video" id="video">

   <option value="0" selected>=選擇影片=</option>

    <option value="1">影片一</option>

    <option value="2">影片二</option>

    <option value="3">影片三</option>

  </select>

  <input name="submit" type="submit" value="送出">

</form>

<form action="b.php" method="post">

  POST 傳送<br>

  <select name="select_video" id="video">

   <option value="0" selected>=選擇影片=</option>

    <option value="1">影片一</option>

    <option value="2">影片二</option>

    <option value="3">影片三</option>

  </select>

  <input name="submit" type="submit" value="送出">

</form>

</body>

</html>

將下面代碼存成 b.php 並存放於與 a.html 相同資料夾內

b.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<?php

//先設定內容為空的變數

$get_or_post = '';//get 或 post 方式

$video_sel  = '';//影片編號

$video_1  ='pfxB5ut-KTs';//第一部影片網址

$video_2  ='_PHnRIn74Ag';//第二部影片網址

$video_3  ='Dlf1_vuIR4I';//第三部影片網址

$video_url  ='';//判斷傳輸過來的資料後,取得的影片網址編號

$err  ='';//發生錯誤時的記錄內容

//判斷是否為 GET 傳遞資料

if($_GET){

 $get_or_post  = 'get';

 $video_sel    = $_GET['select_video'];//影片編號 得到的結果不是 0 就是 1 或 2 或 3 其中一樣

  //判斷選了第幾部

  if($video_sel == '0'){$err = '沒選擇影片';}

   elseif($video_sel == '1'){$video_url = $video_1;} //選了第1部

    elseif($video_sel == '2'){$video_url = $video_2;} //選了第2部

     elseif($video_sel == '3'){$video_url = $video_3;} //選了第3部

      else{$err = '網址錯誤';} //為了預防不可預期的結果 除了 0 1 2 3 以外,皆顯示網址錯誤訊息 

  }elseif($_POST){

  //使用 post 傳遞資料

  $get_or_post  = 'post';

  $video_sel    = $_POST['select_video'];//影片編號 得到的結果不是 0 就是 1 或 2 或 3 其中一樣

   //判斷選了第幾部

   if($video_sel == '0'){$err = '沒選擇影片';}

   elseif($video_sel == '1'){$video_url = $video_1;} //選了第1部

    elseif($video_sel == '2'){$video_url = $video_2;} //選了第2部

     elseif($video_sel == '3'){$video_url = $video_3;} //選了第3部

      else{$err ='網址錯誤';} //為了預防不可預期的結果 除了 0 1 2 3 以外,皆顯示網址錯誤訊息

 }else{

  //除了 get 及 post 以外 其餘方式皆視為非法

  $err = '抱歉!請使用正確傳遞方式';

 }

if($err == ''){

 echo '傳遞方式：'.$get_or_post.'<br />';

 echo '選擇了第 '.$video_sel.' 部影片<br />';

 echo '<iframe width="640" height="360" src="https://www.youtube.com/embed/'.$video_url.'" frameborder="0" allowfullscreen></iframe>';

}else{echo $err;}

echo '<p><a href="a.html">返回</a></p>';

測試上面的表單後，會發現，當使用 get 傳遞資料時，傳遞的資料會顯示在網址列當中，並且使用 urlencode 編碼方式，將資料編碼，以上面例子為例，若使用get傳遞方式，網址會顯示如這樣（IE瀏覽器）：
http://127.0.0.1/b.php?select_video=1&submit=%E9%80%81%E5%87%BA
Chrome及火弧瀏覽器會直接顯示
http://127.0.0.1/b.php?select_video=1&submit=送出

就IE而言
b.php 是目前正在執行的程式名稱，? 符號後面即代表傳送出的資料內容，而傳遞的資料會以 & 此符號去區隔開來，因此此資料分成兩部份
select_video=1 (第一部份)
submit=%E9%80%81%E5%87%BA (第二部份)
此兩部份就是表單上的 name 和選擇(填寫)的值，因為被編碼過，所以中文會呈現出上面看似亂碼的東東，使用解碼指令 urldecode() 就可以查看出資料中完整訊息了，代碼如下：

urldecode() 解碼

1

2

3

<?php

$x = 'http://127.0.0.1/b.php?select_video=1&submit=%E9%80%81%E5%87%BA';

echo urldecode($x);

得到的結果就是這樣：http://127.0.0.1/b.php?select_video=1&submit=送出

當你瀏覽任何頁面時，若瀏覽器沒有接收到 post 資訊檔頭時，基本上預設進入頁面的初始，都是使用 GET 方式抓取頁面資料

我們用 yahoo 搜尋為例做說明，小學生隨意點了雅虎購物
https://tw.buy.yahoo.com/?z=2
我們取? 問號後的參數 z=2 去修改成 z=3
就可知道它是以 z = 數字區分產品的大分類，當然它數量繁多，因此大分類下應該還有中分類，小分類等等的區分吧！
再隨意點個連結進去：
https://tw.buy.yahoo.com/?sub=1&hpp=z3sub1
這裡似乎就是中分類，分類是以 sub= 後面的數字做頁面的改變，所以直接輸入
https://tw.buy.yahoo.com/?sub=整數　應該就可以看到各式各樣的產品，當然若有些產品下架或是已停止出售，就必須做一個預設頁面，顯示給訪客看，至於 hpp=z3sub1 這應該又是產品小分類的代稱之類的

由此可知，因為頁面載入的方式是以 GET 傳遞變數，因此程設師便可以 $_GET['sub'] 去判斷訪客到底目前在那一個頁面，然後再比對資料庫的資料呈現頁面給訪客瀏覽！

jquery + php 方式傳遞資料

下面有個範例可以下載，小學生是合成上面的影片與帳號密碼再加上 jquery 所做的簡單範例，可以下載回去看看，程式中包括了　a.html　b.php　jquery-1.11.3.min.js　這四個檔案，放在相同資料夾下開啟a.html 瀏覽，執行頁面即可以看到變化，這是一個很簡單基本的傳遞模式，注意！本頁面一開始便有說明 jquery 的缺點，因此執行程式時，瀏覽器的 javascript 功能必須是開啟的狀態（一般瀏覽器多半是預設為開啟，若你懂得如何關閉，應該就懂得如何開啟吧！）

※若要改變 get 或 post 方式，請修改 a.html 第 27 行的 type: 'post',//可改 get 或 post
把 post 改成 get 存檔即可囉

引用資料來源：https://scriptmarks.com/html-php-表單傳送與接收資料/

小叮噹～隨手記

網頁

2017年3月31日星期五

PHP 語法入門-4～html php 表單傳送與接收資料

jquery + php 方式傳遞資料

沒有留言:

張貼留言

網頁

2017年3月31日 星期五

PHP 語法入門-4～html php 表單傳送與接收資料

jquery + php 方式傳遞資料

沒有留言:

張貼留言

2017年3月31日星期五