使用 Perl、jQuery、Ajax、JSON 和 MySQL 实现简单的登录_H5之家

简介

自 WWW 创始之初，开发人员就尝试为他们的网站提供新的特性和部件来吸引用户，并通过应用最新的技术来简化操作。如今，一个普通的 web 用户的主要活动就是网上购物、搜索信息、注册论坛和社区、玩网络游戏，以及在互联网上与其他用户交互。对于大部分这类行为，用户都需要注册并登录网站。需要特别注意这些基本特性；对于用户来说，它们必须简单、快速和安全。从开发人员的角度来看，由于采用新的技术，实现这些新特性将变得更为简单。

在本文中，您将了解如何将这些技术集合在一起，然后为您的网站实现一个简单的登录特性。

实现过程分为 4 个部分：

在，您将找到有关将以上所有部分结合起来的分步操作。本文假设读者熟悉前面提到的技术并具有一定的 web 开发经验。如果您的经验足够丰富的话，可以直接阅读操作部分。

本文未涉及的内容

需要注意的是，本文未涵盖有关安全性的内容，例如，检查用户的输入以排除潜在的数据和系统威胁。因此，也没有介绍有关保存用户密码的加密方法的内容。然而，强烈建议您了解系统的漏洞并在代码中构建相关特性。

SQL

由于本文将介绍的是非常简单的登录特性，因此 users 表只包含 3 个字段；一个唯一的 id，一个唯一的 username 和一个 password。

清单 1. SQL 代码

CREATE TABLE `mydb`.`users` ( `id` INT NOT NULL AUTO_INCREMENT , `username` VARCHAR(45) NOT NULL , `password` VARCHAR(45) NOT NULL , PRIMARY KEY (`id`) , UNIQUE INDEX `id_UNIQUE` (`id` ASC) , UNIQUE INDEX `username_UNIQUE` (`username` ASC) ); COMMIT;

实际的数据插入和唯一性检验是通过注册特性实现的，因此不属于本文涵盖的内容。我们假设 users 表已经填充了相应的用户信息，这些都是实现登录所必需的。

但是，出于测试考虑，您可能需要使用如下代码向 users 表插入两个简单的条目：

INSERT INTO `mydb`.`users` (`id`, `username`, `password`) VALUES(1, 'username1', 'password1'); INSERT INTO `mydb`.`users` (`id`, `username`, `password`) VALUES(2, 'username2', 'password2'); COMMIT;

如果使用的不是 MySQL，那么您的数据的 SQL 语法可能和 MySQL 的语法稍微有些不同。

HTML

HTML 文件包含登录表单、CSS 和 JavaScript 文件引用。

CSS 引用

为了保持简单性，本文将更多地侧重于以上技术的实现而不是登录表单的设计，因此使用了现成的源和一个修改过的 MIT License，称为 Blueprint CSS 框架，确保浏览器之间的兼容性。当然，互联网上有很多免费的面向不同设计的 CSS 实现。
参见，了解有关 Blueprint 框架的更多信息。

JavaScript 引用

除了 jQuery 库外，还存在对 JavaScript 文件的引用（），本文稍后将解释这一点。

在本文撰写之际，jQuery 的版本是 1.4.4，请参见，选用最新的版本。

登录表单

登录表单包含一个 username 文本字段、一个 password 字段和一个 submit 按钮。

<form method="post" action=""> <fieldset> <legend>Enter information</legend> <p> <label for="username">Username</label> <br /> <input type="text" size="20" /> </p> <p> <label for="password">Password</label> <br /> <input type="password" size="20" /> </p> <p> <button type="submit"> <img alt="ok" src= "http://www.blueprintcss.org/blueprint/plugins/buttons/icons/tick.png" /> Login </button> </p> </fieldset> </form>

将使用一个 Captcha 来测试输入的来源，即测试是人工输入还是由计算机生成。
参见，了解有关 Captcha 的更多信息。

图 1. 登录表单的屏幕截图

登录表单的屏幕截图

显示结果

登录操作的结果将显示在 div 标记中，该标记在加载期间将隐藏，稍后由 JavaScript 填充。

图 2. JavaScript 返回的错误消息的屏幕截图图 4. Perl 脚本返回的成功消息的屏幕截图完整的 HTML 代码清单 2. login.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Very simple login using Perl, jQuery, Ajax, JSON and MySQL</title> <link type="text/css" media="screen, projection" href="http://www.blueprintcss.org/blueprint/screen.css" /> <link type="text/css" media="screen, projection" href="http://www.blueprintcss.org/blueprint/plugins/buttons/screen.css" /> <link type="text/css" media="print" href="http://www.blueprintcss.org/blueprint/print.css" />  <script type="text/javascript" src="//code.jquery.com/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="login.js"></script> <style type="text/css"> #loginContent { width: 350px; margin: 100px auto; } button[type] { margin: 0.5em 0; } </style> </head> <body> <div> <div> </div> <form method="post" action=""> <fieldset> <legend>Enter information</legend> <p> <label for="username">Username</label> <br /> <input type="text" size="20" /> </p> <p> <label for="password">Password</label> <br /> <input type="password" size="20" /> </p> <p> <button type="submit"> <img alt="ok" src= "http://www.blueprintcss.org/blueprint/plugins/buttons/icons/tick.png" /> Login </button> </p> </fieldset> </form> </div> </body> </html>

尽管 CSS 并非主要考虑，HTML 代码中仍然包含了额外的两行，用于美化表单和按钮的外观。

代码验证

HTML 代码和额外的 CSS 定义都已通过 W3C Validation Services 的验证。
参考，了解有关 W3C Validation Services 的更多消息。

JavaScript

用户提交登录表单后，jQuery 库将读取输入。然后将进行一个非常简单的测试，检查是否提交了空的字段。之后，将对 Perl 脚本进行一个 Ajax 调用（）。Ajax 调用的关键是将 dataType 参数设置为 json。

根据脚本调用的结果，将调用 error 或 success 函数。在本代码示例中，这两个函数都将结果写入到 div 标记，并使用 loginResult id。

如果失败的话，样例代码将显示 jQuery 提供的 XMLHttpRequest.responseText、textStatus 和 errorThrown。