PHP+Mysql+jQuery查询和列表框选择操作实例讲解

一、开篇介绍

在后台管理系统中，我们经常需要实现一个功能：通过查询数据库来展示数据，并允许用户从列表中选择所需的数据项。本文将带你了解如何使用PHP、MySQL和jQuery实现这一功能。我们将以一个简单的联系人管理系统为例，展示如何通过ajax查询MySQL数据库，并将结果展示在列表框中供用户选择。

二、HTML结构

我们需要创建一个基本的HTML表单结构。包括一个输入框用于输入查询关键字，一个搜索按钮以及一个列表框用于展示查询结果。

三、MySQL数据表结构

为了演示查询功能，我们需要一个简单的MySQL数据表结构。这里我们创建了一个名为`t_mult`的表，包含姓名和手机号码字段。

四、CSS样式设计

接下来，我们可以为页面设计一些基本的CSS样式。这里我们加载了Multiselect插件所需的样式文件，当然你也可以根据自己的需求进行设计和调整。

五、JavaScript实现

然后，我们需要使用JavaScript来实现查询和列表框选择功能。我们调用Multiselect插件来初始化列表框。然后，我们为搜索按钮添加点击事件，通过Ajax发送请求到服务器进行查询。

六、服务器端处理

在服务器端，我们需要编写PHP代码来处理查询请求并返回结果。这里假设你有一个名为`action.php`的文件来处理请求。当收到请求时，它会根据输入的关键字从数据库中查询数据并返回给前端。

七、实现细节

在JavaScript代码中，我们首先获取输入框中的关键字，然后通过Ajax发送POST请求到服务器端。服务器接收到请求后，根据关键字查询数据库并返回结果。前端收到结果后，将其展示在列表框中供用户选择。我们还添加了一些错误处理逻辑，如当没有查询到记录时显示相应的提示信息。

八、总结与展望

AJAX与PHP的交互：一个查询操作的实例

当你在搜索框轻轻点击搜索按钮时，一场微妙的AJAX异步操作正在悄然进行。JavaScript巧妙地从搜索框获取你的输入值，然后通过POST方式将这些信息传递给后台程序action.php进行处理。处理完毕后，程序将结果返回给JavaScript。如果返回的是数字“1”，那么HTML页面会向你温柔地提示：“没有找到相关记录”。否则，获取的结果将被展示在左边的列表框（待选区）——那个名为liOptionms2side__sx的列表框中。

此刻，一个关键的问题浮现：为什么列表框的名称不是常见的liOption，而是变成了liOptionms2side__sx呢？答案源于我们的Multiselect插件。这个插件能将一个普通的列表框转化为两个列表框——一个待选区，一个已选区。通过插件代码，我们可以发现左边的列表框命名为liOptionms2side__sx，而右边的（已选区）则命名为liOptionms2side__dx。这个结构在我们后续的操作中会非常重要。

接下来，让我们转向PHP的世界，看看action.php是如何处理的。

它连接到数据库。数据库连接成功后，会进行一个关键的操作——读取数据并输出。它接收来自搜索框的值，并根据这些值构建不同的SQL语句来查询数据。如果查询结果不为空，它会以HTML选项的形式返回数据。这些选项可以被添加到我们的列表框中。具体的代码如下：

然后，我们还有另一个重要的操作——提交操作。后台的post.php程序会接收最终提交的数据。我们获取的是右边列表框liOptionms2side__dx的值。如果在这个列表框中有选中的项，这些项的值会以逗号分隔的形式返回；如果没有任何选择，则返回一个提示信息。值得注意的是，我们在处理时获取的是右边列表框的值，而不是原始的liOption的值。

这个查询操作的实例虽然实现了一些基本功能，但仍有一个小问题待解决：在待选区往已选区添加项目时，如何确保已经添加过的项目不再重复添加？这个问题留给大家思考，也许你可以尝试找到一种优雅的解决方案。至此，我们的交互过程基本完成。由cambrian.render('body')结束整个过程的渲染。

这个实例展示了如何使用AJAX和PHP进行前后端交互，实现了数据的查询和提交。在这个例子中，我们使用了JavaScript的AJAX技术与PHP进行通信，通过数据库查询获取数据并动态更新页面元素。这个实例展示了现代web开发中的一种常见模式，并引发了对数据处理和交互操作更深入的思考。