HTML 頁面真的需要靜態化嗎？再考慮一下！
21CTO 導讀：很多網站為了加快速度，全部生成了靜態HTML，但是真的需要靜態化嗎？請本文
給大家的一些好示例。
我們一起來對靜態頁下一個定義，即“頁面顯示的資訊與儲存結構完全一致”。因此，如果要構建一個顯示資料庫資訊動態頁面，需要使用伺服器端語言渲染，如.php/.aspx/.jsp/.servlet 等。
做為一個Web開發人員，我常常聽到“HTML速度快”、“HTML 不能顯示動態內容”等，這聽起來似乎有道理，但並不完全正確。
下面我們就討論為什麼 HTML 頁面不是真正的靜態頁面。
使用 HTML 頁面進行動態處理
讓我們用 HTML 頁面進行互動式操作，在此處，我們將建立一個使用者訂閱的功能，大家知道，這個功能在網際網路上很常見。
該互動功能描述如下：
頁面上有一個 Email 的文字輸入表單以及提交按鈕，使用者輸入 TA 的郵箱並單擊提交按鈕後，郵件將儲存在資料庫表中，使用者會收到一條感謝資訊。
HTML 頁面程式碼如下：
<input id=“email”placeholder = “您的電子郵件地址” /> <button id=“submit” >提交</button > <div id = “message” > </div>
說明：返回的提示訊息“謝謝”將顯示在 message 的 DIV 中。
讓靜態頁面靜態化
下面我們要完成的是，怎樣在資料中插入電子郵件並顯示感謝資訊，我們採用 JQuery 庫來實現。
使用捕獲事件即可，事件上呼叫 JQuery 的 Ajax 方法，將郵件地址釋出到 PHP 指令碼。
以下是我們的 JQuery程式碼：
$("#submit").click(function (e) {
$.ajax({
type: "POST",
url: "result.php",
contentType: "application/json; charset=utf-8",
data: '{"email":"' + $("#email").val() + '"}',
success: function (msg) {
$("#message").html(msg);
},
error: function (req, status, error) {
alert(req + " " + status + " " + error);
}
});
return false;
});
來說明一下，在上面的 JQuery 方法中，我們將 url 的鍵值傳遞給 result.php 頁面，此頁面將接收郵件的內容。
即 data 的值，詳細請看上碳的 Ajax 程式碼，使用者的郵件將以鍵值方式傳送。
Ajax 請求完居後，PHP將返回 success 給回撥函式，我把該回調函式從 PHP 頁面接收到的值，寫入在 message 的 div 中。
如果在 Ajax 呼叫期間出現一些錯誤，則呼叫“error”段的回撥函式。
下面是我們的 PHP頁面內容：
<?php $email = $_REQUEST['email']; //如果插入資料庫則返回 success //如果沒有成功返回 wrong,Try again ?>
我在PHP指令碼節省了一些程式碼，聰明的讀者可以自行完成。它主要的任務就是接收電子郵件值，將其插入資料庫，然後返回成功等資訊。
至此，我們的程式碼部分到此結束。
現在，如果哪個開發人員告訴你HTML頁面不能用於顯示動態內容，請禮貌地告訴那個人，還有另一種方式！
我們使用JQuery Ajax， HTML頁面可以像伺服器頁面一樣工作，人們可以方便的使用，大HTML頁面直接建立任何型別的資料庫應用程式。
愉快編碼，不要忘記點贊本教程！
作者：洛逸
來源：21CTO社群
說明：未經授權，請勿轉載本站原創作品。