前后端交互 · 程序員講師課件

# :-: 一、從靜態資源到動態內容 ### 1、從`txt`到`html` * `demo.txt`: 瀏覽器對純文本文檔,瀏覽器無須渲染,原樣輸出即可 ```txt 國產好劇 1. 少年派 2. 帶著爸爸去留學 3. 親愛的, 熱愛的 ``` * `demo.html`: 根據標簽預置的樣式進行解析,更加符合人類的閱讀習慣,也利于引擎理解文檔的內容 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>國產好劇</title> </head> <body> <h2>國產好劇</h2> <ul> <li><a href="">少年派</a></li> <li><a href="">帶著爸爸去留學</a></li> <li><a href="">親愛的, 熱愛的</a></li> </ul> </body> </html> ``` ### 2、從`html`到`php` * `demo.php`:后綴由`html`直接改為`php`,實際上當前頁面已經變成了動態的php應用程序腳本 * `demo.php`: 允許通過`<?php ... ?>`標簽,添加php代碼到當前腳本中 * php標簽內部代碼由`php.exe`解釋, php標簽之外的代碼原樣輸出,仍由web服務器解析 ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>國產好劇</title> </head> <body> <h2><?php echo '國產好劇'; ?></h2> <ul> <li><a href=""><?php echo '少年派' ?></a></li> <li><a href=""><?php echo '帶著爸爸去留學' ?></a></li> <li><a href=""><?php echo '親愛的, 熱愛的' ?></a></li> </ul> </body> </html> ``` >[info] php代碼的詳細解析過程 * 因為web服務器只能識別和處理html的內容, 遇到`<?php ?>`代碼段統統不認識,全部轉發給`php解釋器`處理 * `html與php混編`: * 如果想讓web服務器能自動轉發這些請求, 文檔的擴展名就不能是`.html`, 必須是`.php` * 遇到一個`<?php ?>`就轉發一個`cgi`請求, 不管這些標簽出現在當前文檔的什么地方 * 請放心, 最終生成的,或者說用戶最終看到的,仍然是一個`html`文檔, php代碼中的內容不會被泄漏的 ### 3、`php`適合生成動態內容 >[info] 對于動態內容,最直觀的想法就是,把頁面內容保存到變量中 * php 是創建動態網站的編程工具, 頁面內部如果全部寫死, 不如直接創建html文檔好了 * php 中內容的動態化,最簡單的方式就是創建變量來保存這些數據 ```php <?php // 創建二個變量來保存頁面中的動態內容 $headline = '國產好劇'; $movies = ['少年派', '帶著爸爸去留學','親愛的, 熱愛的']; ?> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><?php echo $headline; ?></title> </head> <body> <h2><?php echo $headline; ?></h2> <ul> <li><a href=""><?php echo '少年派' ?></a></li> <li><a href=""><?php echo '帶著爸爸去留學' ?></a></li> <li><a href=""><?php echo '親愛的, 熱愛的' ?></a></li> </ul>  <?php // 數組可使用foreach()語句輸出 // foreach( $array as $key=>$value) {...} foreach ($movies as $key=>$value) { echo $key+1 . ': ' . $value . '<br>'; } // 將php與html代碼混編的時候,大括號很容易造成配對錯誤,最好杜絕它 // 所以php的流程控制語句, 都提供了替代語法,用冒號代替大括號 // php是最優秀, 最原生的模板語言, 替代語法,讓php更加的優雅的與html生活在一起 ?> <hr>  <?php echo '<ul>'; foreach ($movies as $key=>$value) { echo '<li><a href="">' . ($key+1) . ': ' . $value . '</a></li>'; } echo '</ul>'; ?> <hr>  <ul> <?php foreach ($movies as $key=>$value) { ?> <li><a href=""><?php echo ($key+1) . ':' . $value; ?></a></li> <?php } ?> </ul> <hr>   <ul>  <?php foreach ($movies as $movie): ?> <li><a href=""><?php echo $movie; ?></a></li> <?php endforeach;?> </ul> </body> </html> ``` ***** # :-: 二、http請求類型 > 最常用的就是`GET`和`POST`二種請求類型 ## 1、GET 請求 * 請求參數以鍵值對的方式,附加到url地址上,稱為查詢字符串,用`?`號與當前腳本分隔 * url格式: `index.php?name=peter&age=30` * 受url長度限制, `GET`方式傳遞的數據也是有限制的 * 服務器端腳本使用預定義變量數組 `$_GET` 進行接收 ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>get</title> </head> <body> <form action="" method="get"> <label for="email">郵箱:</label> <input type="email" id="email" name="email" value=""> <label for="password">密碼:</label> <input type="password" id="password" name="password" value=""> <br/>  <label for="email">郵箱:</label> <input type="email" id="email" name="email" value="<?php echo isset($_GET['email']) ? $_GET['email'] : ''; ?>"> <label for="password">密碼:</label> <input type="password" id="password" name="password" value="<?php echo isset($_GET['password']) ? $_GET['password'] : '';?>"> <br/>  <label for="email">郵箱:</label> <input type="email" id="email" name="email" value="<?php echo $_GET['email'] ?? ''; ?>"> <label for="password">密碼:</label> <input type="password" id="password" name="password" value="<?php echo $_GET['password'] ?? ''; ?>"> <button>登錄</button> </form> </body> </html> <?php // 獲取通過url發送的變量參數, php通過超全局變量$_GET獲取 // $_GET是一個數組,鍵名就是get參數名 // 鍵名=>變量名, 值=>變量值 // print_r()格式化打印輸出一個數組 print_r($_GET); echo $_GET['email']; // 獲取變量之前要進行判斷,用isset() if (isset($_GET['email'])) { echo $_GET['email']; } else { // 給個默認值 $_GET['email'] = ''; } // 與js類似,可以用三元運算符進行簡化 echo isset($_GET['email']) ? $_GET['email'] : ''; // 使用<pre>標簽,在網頁中可以實現格式化輸出 echo '<pre>'; print_r($_GET); ?> ``` ## 2、POST 請求 * 請求參數放在`header`請求頭中發送, url地址看不到請求參數,適合敏感信息 * 通常是通過表單提交并, 用來更新服務器上的信息 * 適合發送大量的數據到服務器端, 長度受到配置文件限制,但比`GET`要大得多 * 服務器端腳本使用預定義變量數組 `$_POST` 進行接收 ```php <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>post</title> </head> <body> <form action="" method="post"> <label for="email">郵箱:</label>  <input type="email" id="email" name="email" value="<?php echo isset($_POST['email']) ? $_POST['email'] : ''; ?>"> <label for="password">密碼:</label> <input type="password" id="password" name="password" value="<?php echo isset($_POST['email']) ? $_POST['email'] : '';?>"> <button>登錄</button> </form> </body> </html> <?php // POST請求, 參數不是通過URL傳遞, 而是通過請求頭 // 獲取通過url發送的變量參數, php通過超全局變量$_POST獲取 // $_POST是一個數組,鍵名就是POST參數名 // 鍵名=>變量名, 值=>變量值 // print_r()格式化打印輸出一個數組 print_r($_POST); echo $_POST['email']; // 獲取變量之前要進行判斷,用isset() if (isset($_POST['email'])) { echo $_POST['email']; } else { // 給個默認值 $_POST['email'] = ''; } // 與js類似,可以用三元運算符進行簡化 echo isset($_POST['email']) ? $_POST['email'] : ''; // 使用<pre>標簽,在網頁中可以實現格式化輸出 echo '<pre>'; print_r($_POST); ?> ```