认为HTML页面只能是静态的......再想一想！查看使用HTML页面进行简单动态操作的示例。

根据静态页面的定义- “它显示的信息与存储的完全一致”。因此，如果要构建一个显示数据库信息的页面（动态），那么您将使用服务器端页面，如.php / .aspx / .cshtml。

作为一名网络开发人员，我经常听到“ HTML页面是一个静态页面，所以它不能用于显示动态内容。” 这听起来很公平，但并不完全正确。让我们讨论为什么HTML页面不是真正的静态页面。

使用HTML页面进行简单动态操作

让我们使用HTML页面进行简单而强大的操作。在这里，我将创建一个用户可以订阅博客的功能。这个功能在互联网上很常见！

您将拥有“输入”和“按钮”控件。用户将输入他/她的电子邮件并单击按钮。单击该按钮，他/她的电子邮件应存储在数据库表中，他/她应该收到一条感谢信息。

HTML页面代码：

<input id="email" placeholder="Email Address" />

<button id="submit">Submit</button>

<div id="message"></div>

注意：最后的消息（谢谢）将显示在“message”div中。

使HTML页面动态化

现在的问题是，“如何在数据库中插入电子邮件并显示感谢信息？” 答案是通过 jQuery AJAX 方法。

这是主要的捕获！使用jQuery AJAX，我可以将电子邮件值发送到PHP页面，然后这个PHP页面将它插入到数据库中，然后返回感谢信息。

我将在按钮单击 事件上调用jQuery AJAX方法，并将电子邮件值发布到PHP 页面。

下面是我们的jQuery AJAX代码：

$("#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 AJAX方法代码中，我将 “ url ”键传递给 “ result.php ” 页面。此PHP页面将接收电子邮件值。

该“数据”值（见jQuery的AJAX代码），将通过电子邮件的用户填写输入控制值。

AJAX请求成功完成时将调用的“ success ”回调函数。我在此回调函数中从PHP页面接收返回的值，然后将其放在“ message ”div中。

如果在AJAX调用期间出现一些错误，则调用“ 错误 ”回调函数。

最后PHP页面......

<？PHP

$ email = $ _REQUEST ['email'];

//进行数据库操作并在电子邮件中插入电子邮件值。

//如果插入操作成功，则回显“您已订阅”。

//别的“出了点问题。再试一次。”

//我假设操作成功，所以返回

//“你订阅了。” 回到jQuery AJAX方法的消息。回声“谢谢！”;

？>

PHP页面接收电子邮件值，将其插入数据库，然后发回谢谢消息。

代码部分到此结束。现在，如果任何Web开发人员告诉您HTML页面不能用于显示动态内容，请礼貌地告诉那个人，“你错了，还有另一种方式！”

使用jQuery AJAX， HTML页面可以像服务器页面一样工作。您可以使用它，从HTML页面直接创建任何类型的数据库应用程序。

快乐的编码，不要忘记喜欢这个教程！