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社区
说明：未经授权，请勿转载本站原创作品。