[转载]使用 jQuery 和 PHP 构建一个受 Ajax 驱动的 Web 页面

华斐 — Sun, 28 Feb 2010 15:15:58 +0000

一个下午的时间就耗费在这个上了，在PHPCHINA看的专题《使用 jQuery 和 PHP 构建一个受 Ajax 驱动的 Web 页面》，自己抄代码运行了几次终于能成功了，原来这些jQuery、Ajax等新技术也不算很难懂的！

创建一个简单的应用程序:一个电话本

有了 jQuery 的基本知识之后，我们就可以开始用 PHP 和 MySQL 构建一个简单的电话本应用程序了。这个应用程序包含三个部分:

一个 MySQL 表，用来保存人名和电话号码
具有搜索表单的 index.php 文件
用来查询数据库表的 find.php 页面

我们将依次构建这些元素。

在 MySQL 内创建数据库表可能是最简单的部分。我们希望此应用程序是一个包含有最少量信息的表 — 比如，一个 ID（表的键）、一个名字字段以及一个电话号码字段。最后这两个字段可以是字母数字，所以将使用 varchar() 函数。我们将创建 ID 字段作为一个 autoincrement primary key。将此表称为目录并使用如下的 Structured Query Language (SQL) 代码来创建它:

清单 2. 使用 SQL 创建目录表

CREATE TABLE `directory` (
 `id` INT NOT NULL AUTO_INCREMENT ,
 `name` VARCHAR( 64 ) NOT NULL ,
 `phone` VARCHAR( 16 ) NOT NULL ,
 PRIMARY KEY ( `id` )
) TYPE = MYISAM ;

正如您所见，这里没有什么复杂的。实际上，之后您将有大量机会自己更新这个应用程序。扩展此应用程序的一种方式是添加一个关键字或地址字段，而二者均能让您进一步精炼搜索。不过，现在，我们还是先从简单的开始吧。

创建了该表之后，需要填充它。可以使用 phpMyAdmin 或命令行来输入一个名字和电话号码。也可以使用如下的 SQL 指令集:

清单 3. 使用 SQL 填充此表

insert into `directory` (name,phone) values ('Tom Smith', '512-555-0111');
insert into `directory` (name,phone) values ('Bill Smith', '512-555-0112');
insert into `directory` (name,phone) values ('John Smith', '512-555-0113');
insert into `directory` (name,phone) values ('Jane Smith', '512-555-0114');
insert into `directory` (name,phone) values ('Sara Smith', '512-555-0115');

输入了这些值之后，如果从命令行的目录操作运行一个 select * 或单击 phpMyAdmin 内的 Browse ，请确保能够获得一个记录列表。

创建 index.php 文件

接下来，为应用程序创建一个简单的主页。此页面是一个 PHP 文件，称为 index.php，但此时它包含最多的仍是 HTML 代码。当完成了 find.php 文件后（下一步），我们还会返回来完成这一代码块。

此刻，所需做的就是创建一个包含表单的骨架 HTML 文件。表单内的每个元素均包含一个惟一的 ID，因为我们想要能够使用 jQuery 标识每一块。

清单 4. 包含表单的 HTML 文件



Welcome!
 


Search our Phone Directory
    

        Search name/phone

上述代码中有两点应该会立即引起您的注意。其一，没有动作与此表单相关联。这没关系：请记住，此表单将不会遵循传统的 “单击、等待、查看” 的同步模式。相反，我们将会添加能够监视 search_term 字段内的用户动作的功能。

应该注意到的第二点是 search_results DOM 元素 — 表单下面的空白元素。这个 DOM 元素将会包含从搜索中获得的所有响应。在对此进行深入研究之前，让我们先来创建 find.php 页面。

创建 find.php 文件

find.php 文件是所有操作发生的地方。在此文件内，应用程序连接到数据库并针对此目录表运行查询。

find.php 文件的第一部分包含连接信息。出于本文的目的考虑，我将该信息嵌入到了此文件。对于大多数开发人员而言，此信息将会处于一个附带的或必需的文件内，或是作为一个更大的框架的一部分。

清单 5. 创建 find.php 文件

接下来，将会从此 index.php 文件内的表单获得一个搜索词。对该搜索词进行一些简单处理，然后将该值插入到数据库内。我选择使用 strip_tags() 和 substr() 函数来删除搜索词内的所有 HTML 标记并对之进行简化。进行这类预处理不失为一个好的做法 — 不能百分之百相信用户的输入。

实际上，当具有了一个清晰的搜索词后，就可以通过 mysql_escape_string() 运行它，这可进一步消除可能会破坏数据库的其他陷阱（比如，单引号）。

$term = strip_tags(substr($_POST['search_term'],0, 100));
$term = mysql_escape_string($term);

现在，构建 SQL 语句。我们希望从此目录表能够检索到匹配搜索词的所有名字和电话号码。使用 LIKE 让搜索词能匹配名字和电话这两个字段，然后使用 mysql_query() 运行此查询。

清单 6. 构建 SQL 语句

$sql = "select name,phone
from directory
where name like '%$term%'
or phone like '%$term%'
order by name asc";

$result = mysql_query($sql);

运行了此查询后，可以打印结果。初始化一个 $string 变量来保存结果，然后使用 mysql_num_rows() 检查是否得到了任何结果。如果没有获得针对此搜索词的结果，可以将 $string 设置为等于 “No matches!”。如果的确获得了结果，可打印结果集内的每个名字和电话号码。在过程的末尾，使用 echo 命令打印整个字符串：

清单 7. 使用 echo 命令打印字符串

$string = '';

if (mysql_num_rows($result) > 0){
  while($row = mysql_fetch_object($result)){
    $string .= "".$row->name." - ";
    $string .= $row->phone."";
    $string .= "
\n";
  }

}else{
  $string = "No matches!";
} 

echo $string;
?>

当然，这个 PHP 功能本身就十分有用，但是现在，这一点没有突出体现出来。需要能够为此脚本提供一个搜索词。在下一节，我们将实现这一目的。

向 index.php 添加 jQuery

至此，我们得到的是一对普通的 PHP 页面和一个简单的 MySQL 表。当添加了 jQuery 后，这个普通的应用程序就会变成一个新颖的、受 Ajax 驱动的应用程序，它将更类似于 Mac OS X 上的 Spotlight 或 Google Desktop Search 这样的桌面搜索应用程序。

现在，打开 index.php 文件并确保添加了对最新下载的 jquery.js 文件的调用。

接下来，创建一个简单的函数来阻止搜索表单表现得像典型的表单那样。（使用 preventDefault() 函数实现此目的）。将所有 Submit 按钮和 key-up 事件（即在通过键盘键入字符时发生的事件）重新指向到一个将要创建的新函数，称为 ajax_search()。

清单 8. 创建函数以阻止搜索表单表现得像典型的表单那样

所有系统都就绪后，就可以键入一个请求并查看此搜索引擎的实际工作情况了，每个 key-up 事件都会处理记录。它在单击 Submit 时也能工作。比如，在图 1 中，如果在搜索字段内键入字母 a，应用程序就会返回 Jane 和 Sara Smith 这两条记录，因为这两个名字中都包含此字母。

图 1. 运行中的受 Ajax 驱动的搜索

结束语

当然，针对此应用程序还有很多工作可做。比如，可以添加一个关键字字段，然后允许按关键字搜索。或者，可以让每个人的记录包含针对其所擅长的不同领域的标记或关键字。此后，如果您在项目中遇到问题，就能够通过资源查找来找到能够帮助您的人。此外，还可以添加一个电子邮件字段、一个生日字段 — 无论什么都可以 — 然后扩展搜索参数。

关键的一点是此应用程序的 jQuery 部分并不关心在后端发生的事情。它所知道的就是将一个搜索词传递给一个称为 find.php 的文件。find.php 文件并不知道也不关心它从一个 jQuery 函数接收指令。它所关注的是只要搜索词来自于一个正常的表单提交过程，它就使用该数据来完成查询，然后返回匹配该搜索词的那些记录。

华斐Blog » jQuery

[转载]使用 jQuery 和 PHP 构建一个受 Ajax 驱动的 Web 页面

Search our Phone Directory