正文

如何用jQuery实现二级联动查询数据库表格数据

/0 浏览量
1017

在Web开发中，实现联动查询是常见的需求，尤其是在表单填写时，根据一级选择的值动态加载二级选项。下面，我将详细讲解如何使用jQuery来实现二级联动查询数据库表格数据。

1. 准备工作

首先，确保你的项目中已经引入了jQuery库。以下是jQuery的简单引入方式：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. 数据库设计

为了演示，我们假设有一个简单的数据库表departments，包含以下字段：

  • id：部门ID
  • name：部门名称
  • parent_id：上级部门ID（根部门为0）

3. HTML结构

创建一个简单的HTML结构，包含两个下拉列表（<select>）：

<select id="parentDepartment">
  <option value="0">请选择上级部门</option>
</select>

<select id="childDepartment">
  <option value="0">请选择下级部门</option>
</select>

4. jQuery代码

接下来，编写jQuery代码来实现联动查询：

$(document).ready(function() {
  // 初始化二级联动
  initChildDepartment();

  // 初始化时加载一级部门
  function initChildDepartment() {
    $('#parentDepartment').change(function() {
      var parentId = $(this).val();
      loadChildDepartment(parentId);
    });
  }

  // 加载二级部门
  function loadChildDepartment(parentId) {
    if (parentId === '0') {
      $('#childDepartment').html('<option value="0">请选择下级部门</option>');
      return;
    }

    $.ajax({
      url: 'load_child_department.php', // 服务器端处理文件
      type: 'GET',
      data: { parentId: parentId },
      dataType: 'json',
      success: function(data) {
        var options = '<option value="0">请选择下级部门</option>';
        $.each(data, function(index, item) {
          options += '<option value="' + item.id + '">' + item.name + '</option>';
        });
        $('#childDepartment').html(options);
      },
      error: function() {
        alert('加载部门数据失败！');
      }
    });
  }
});

5. 服务器端处理

在服务器端，创建一个名为load_child_department.php的文件，用于处理AJAX请求并返回JSON格式的部门数据：

<?php
// 连接数据库（此处以MySQL为例）
$mysqli = new mysqli('localhost', 'username', 'password', 'database');

// 检查连接
if ($mysqli->connect_error) {
  die('连接失败: ' . $mysqli->connect_error);
}

// 获取一级部门ID
$parentId = $_GET['parentId'];

// 查询二级部门
$query = "SELECT id, name FROM departments WHERE parent_id = $parentId";
$result = $mysqli->query($query);

// 创建数组存储部门数据
$departments = [];
while ($row = $result->fetch_assoc()) {
  $departments[] = $row;
}

// 返回JSON数据
header('Content-Type: application/json');
echo json_encode($departments);
?>

6. 总结

通过以上步骤，我们成功实现了使用jQuery和PHP进行二级联动查询数据库表格数据的功能。在实际项目中，可以根据需求调整数据库设计、HTML结构和jQuery代码。希望这篇文章能帮助你解决问题。

-- 展开阅读全文 --