使用jQuery和PHP构建一个受Ajax驱动的Web页面(1)(3)

创建 find.php 文件

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

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

清单 5. 创建 find.php 文件

﹤?php define(HOST, "your.host.here"); define(USER, "your-user-name"); define(PW, "your-password"); define(DB, "your-db-name"); $connect = mysql_connect(HOST,USER,PW) or die('Could not connect to mysql server.' ); mysql_select_db(DB, $connect) or die('Could not select database.');

接下来，将会从此 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 .= "﹤b﹥".$row-﹥name."﹤/b﹥ - "; $string .= $row-﹥phone."﹤/a﹥"; $string .= "﹤br/﹥\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 文件的调用。

﹤script src="./jquery.js"﹥﹤/script﹥

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

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

﹤script type='text/javascript'﹥ $(document).ready(function(){ $("#search_results").slideUp(); $("#search_button").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term").keyup(function(e){ e.preventDefault(); ajax_search(); }); });

您注意到我们是如何使用 slideUp() 函数来暂时隐藏 search_results DOM 元素的吗？以及又是如何使用 $() 函数来按名字引用该 DOM 元素？如果您十分熟悉 CSS，那么 jQuery 方式就十分直观和自然了。比如，假设有一个具有惟一 ID search_results 的 DOM 元素，您就可以使用 $("#search_results") 来引用它。就这么简单。

另外还注意到，任何时候，任何人单击了 Search 或在 search_term 字段键入一个字符，一个匿名函数都会阻止默认行为的发生并会将 应用程序流程重新指向到 ajax_search() 函数，该函数我们接下来将会构建。

ajax_search() 函数十分简单。我们想要显示 DOM 元素 search_results之前已经将其隐藏）、获得 search_term 输入字段的值、将该值传递给一个异步运行 find.php 文件的函数$.post()），然后等待响应。当响应到来后还记得么，我们已经确保了该 find.php 将会返回某种响应，即便在没有匹配的情况下也是如此），jQuery 用该响应填充 search_results DOM 元素。

清单 9. ajax_search() 函数

function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("./find.php", {search_term : search_val}, function(data){ if (data.length﹥0){ $("#search_results").html(data); } }) } ﹤/script﹥

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

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

结束语

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

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

1. 使用 jQuery 简化 Ajax 开发
2. 跟ASP.NET MVC一起使用jQuery