php+ajax 实现输入读取数据库显示匹配信息

废话不多说了，直接跟大家贴代码了 dropbox_index.php &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312" /&gt; &lt;title&gt;主搜索引擎下拉框自动显示数 在本文中，我们将探讨如何使用PHP和AJAX技术来实现在用户输入时实时从数据库中检索数据并显示匹配信息。这种功能通常用于搜索框的自动补全或下拉建议，可以显著提高用户体验。 我们来看一下提供的HTML部分，文件名为`dropbox_index.php`。在这个文件中，我们有一个简单的表单，包含一个文本输入字段（`<input id="txt">`）和一个提交按钮（`<input type="submit">`）。文本输入字段具有一个`onkeyup`事件监听器，当用户输入时触发JavaScript函数`showHint(this.value)`。这个事件监听器是实现AJAX的关键，它会在用户每次按键后发送请求到服务器。 JavaScript部分位于`dropbox.js`文件中。该文件定义了一个名为`showHint`的函数，该函数在用户输入时被调用。函数创建了一个XMLHttpRequest对象（或者在不支持此对象的旧版IE中创建ActiveXObject），并发送一个GET请求到`responsepage.php`，带上用户的输入值（`str`）。`responsepage.php`将处理查询并返回匹配的数据。 `responsepage.php`是PHP脚本，负责与数据库交互。它接收`q`参数（即用户输入的关键词），然后将关键词转换为小写，以确保不区分大小写。接下来，脚本连接到MySQL数据库，这里使用的是`mysql_connect`函数，连接到本地主机上的数据库，并使用`mysql_select_db`选择名为`my_db`的数据库。请注意，`mysql_`系列函数在PHP中已被弃用，现在推荐使用`mysqli_`或PDO扩展来处理数据库操作。 在连接成功后，`responsepage.php`执行SQL查询，查找与用户输入关键词匹配的记录。查询语句没有展示完全，但看起来应该是一个SELECT语句，从某个表中选取与`$q`匹配的字段。查询结果处理后，PHP脚本会将其输出到响应中，这将被JavaScript的`stateChanged`函数接收到，并更新页面上`id="txtHint"`元素的内容，即在页面上显示匹配的建议信息。 CSS文件`dropbox.css`用于美化表单元素，如文本输入框和按钮的样式。 总结来说，这个示例展示了如何通过AJAX技术实现实时搜索建议功能。用户在搜索框中输入时，AJAX请求会异步发送到服务器，服务器从数据库中获取匹配项，然后将结果显示回页面，所有这些操作都在不刷新整个页面的情况下完成。这种方法提高了用户体验，因为用户可以看到即时反馈，而无需等待页面完全加载。然而，需要注意的是，由于使用了已弃用的`mysql_`函数，实际项目中应使用更安全的数据库连接方式。同时，为了保证安全性，还需要对用户输入进行适当的清理和过滤，防止SQL注入等攻击。