devbox
Monodyee
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

PHP基础 + Ajax实现三级联动_php三级联动数据库

作者：Monodyee | 2024-02-26 23:34:00

赞

踩

php三级联动数据库

本文目录


三级联动是我们经常见的一个功能，最经典的案例是省市区三级，第一个下拉框选择一个省份，第二个下拉框出现该省份下的城市，第二个下拉框选择一个城市，第三个下拉框出现该城市下的县区。

下面的案例我们采用学校、班级、学生三级，进行联动查询。

文章最后附数据库与本案例源代码。

一、本案例涉及的知识
  1. HTML
  2. jQuery ajax
  3. PHP
  4. MySQL
二、页面准备

三级联动中的第一级是需要事先在页面中显示的，因为第一级需要最先选择。

所以第一级（学校）直接查询出来并在下拉框中显示。

liandong.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 查询所有的学校
$sql = "select * from school";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$school = mysqli_fetch_all($query, MYSQLI_ASSOC);
?>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>三级联动</title>
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
 </head>
 <body>
  <div>
	<label>学校：</label>
	<select id="school">
		<option value="" selected>请选择学校</option>
		<?php foreach ($school as $v) { ?>
			<option value="<?php echo $v['school_id']; ?>"><?php echo $v['school_name']; ?></option>
		<?php } ?>
	</select>
  </div>
  <div>
    <label>班级：</label>
	<select id="class">
		<option value="" selected>请选择班级</option>
	</select>
  </div>
  <div>
	<label>学生：</label>
	<select id="student">
		<option value="" selected>请选择学生</option>
	</select>
  </div>
 </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
三、选择学校查询班级

首先监听学校下拉框的值改变，改变后使用ajax携带当前学校的id请求PHP查询班级数据。

<script>
	$(function () {
		// 监听学校下拉框的值改变
		$('#school').change(function () {
			// console.log('下拉框的值发生改变了，值为：' + $(this).val());
			$.ajax({
			    // 请求 class.php
				url: "class.php",
				// 携带参数 school_id，值为当前选择的学校的id
				data: {school_id: $(this).val()},
				// 成功将返回的数据放入 select 标签中
				success: function (res) {
					$('#class').html(res);
				},
				error: function () {
					alert('数据获取失败！');
				}
			});
		});
	})
  </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

class.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 接收学校id参数
$schoolId = $_GET['school_id'];
// 查询当前学校下的所有班级
$sql = "select * from class where sid = $schoolId";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$class = mysqli_fetch_all($query, MYSQLI_ASSOC);
// 将数组组装成<option></option>的形式，方便在 HTML 中直接显示
$options = [
	"<option value=''>请选择班级</option>"
];
foreach ($class as $v) {
	$options[] = "<option value='".$v['cid']."'>".$v['cname']."</option>";
}
// 打印到页面中，供 ajax 获取
print_r($options);
?>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
四、选择班级查询学生

监听班级下拉框的值改变，改变后使用ajax携带当前班级的id请求PHP查询学生数据。

<script>
	$(function () {
		// 监听班级下拉框的值改变
		$('#class').change(function () {
			// console.log('下拉框的值发生改变了，值为：' + $(this).val());
			$.ajax({
				url: "student.php",
				data: {class_id: $(this).val()},
				success: function (res) {
					$('#student').html(res);
				},
				error: function () {
					alert('数据获取失败！');
				}
			});
		});
	})
  </script>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

student.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 接收班级id参数
$classId = $_GET['class_id'];
// 查询当前班级下的所有学生
$sql = "select * from student where cid = $classId";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$student = mysqli_fetch_all($query, MYSQLI_ASSOC);
// 将数组组装成<option></option>的形式
$options = [
	"<option value=''>请选择学生</option>"
];
foreach ($student as $v) {
	$options[] = "<option value='".$v['id']."'>".$v['name']."</option>";
}
print_r($options);
?>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
五、效果图

在这里插入图片描述

六、源代码
1. MySQL

（1）学校表

CREATE TABLE `school` (
  `school_id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `school_name` varchar(100) NOT NULL DEFAULT '' COMMENT '学校名称',
  PRIMARY KEY (`school_id`)
) ENGINE=MyISAM AUTO_INCREMENT=6 DEFAULT CHARSET=utf8;

  • 1
  • 2
  • 3
  • 4
  • 5

（2）班级表

CREATE TABLE `class` (
  `cid` int(11) NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `cname` varchar(15) NOT NULL DEFAULT '' COMMENT '班级名称',
  `sid` int(11) NOT NULL COMMENT '所属学校',
  PRIMARY KEY (`cid`)
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

（3）学生表

CREATE TABLE `student` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT '序号',
  `image` varchar(255) NOT NULL DEFAULT '' COMMENT '头像',
  `name` varchar(10) NOT NULL DEFAULT '' COMMENT '姓名',
  `age` tinyint(2) unsigned NOT NULL DEFAULT '0' COMMENT '年龄',
  `sex` tinyint(1) NOT NULL DEFAULT '0' COMMENT '性别 1-男 2-女 0-未知',
  `mobile` char(11) NOT NULL DEFAULT '' COMMENT '手机号',
  `idcard` char(18) NOT NULL DEFAULT '' COMMENT '身份证号',
  `address` varchar(100) NOT NULL DEFAULT '' COMMENT '家庭住址',
  `cid` int(11) NOT NULL DEFAULT '0' COMMENT '所在班级的id',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=56 DEFAULT CHARSET=utf8;

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
2. PHP

（1）liandong.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 查询所有的学校
$sql = "select * from school";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$school = mysqli_fetch_all($query, MYSQLI_ASSOC);
?>
<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>三级联动</title>
  <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
 </head>
 <body>
  <div>
	<label>学校：</label>
	<select id="school">
		<option value="" selected>请选择学校</option>
		<?php foreach ($school as $v) { ?>
			<option value="<?php echo $v['school_id']; ?>"><?php echo $v['school_name']; ?></option>
		<?php } ?>
	</select>
  </div>
  <div>
    <label>班级：</label>
	<select id="class">
		<option value="" selected>请选择班级</option>
	</select>
  </div>
  <div>
	<label>学生：</label>
	<select id="student">
		<option value="" selected>请选择学生</option>
	</select>
  </div>
  <script>
	$(function () {
		$('#school').change(function () {
			// console.log('下拉框的值发生改变了，值为：' + $(this).val());
			$.ajax({
				url: "class.php",
				data: {school_id: $(this).val()},
				success: function (res) {
					$('#class').html(res);
				},
				error: function () {
					alert('数据获取失败！');
				}
			});
		});
		$('#class').change(function () {
			// console.log('下拉框的值发生改变了，值为：' + $(this).val());
			$.ajax({
				url: "student.php",
				data: {class_id: $(this).val()},
				success: function (res) {
					$('#student').html(res);
				},
				error: function () {
					alert('数据获取失败！');
				}
			});
		});
	})
  </script>
 </body>
</html>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76

（2）class.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 接收学校ID参数
$schoolId = $_GET['school_id'];
// 查询当前学校下的所有班级
$sql = "select * from class where sid = $schoolId";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$class = mysqli_fetch_all($query, MYSQLI_ASSOC);
// 将数组组装成<option></option>的形式
$options = [
	"<option value=''>请选择班级</option>"
];
foreach ($class as $v) {
	$options[] = "<option value='".$v['cid']."'>".$v['cname']."</option>";
}
print_r($options);
?>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

（3）student.php

<?php
// 连接数据库
$conn = mysqli_connect('localhost', 'root', 'root', 'jtxy');
// 接收学校ID参数
$classId = $_GET['class_id'];
// 查询当前班级下的所有学生
$sql = "select * from student where cid = $classId";
// 执行 SQL 语句
$query = mysqli_query($conn, $sql);
// 取出数据
$student = mysqli_fetch_all($query, MYSQLI_ASSOC);
// 将数组组装成<option></option>的形式
$options = [
	"<option value=''>请选择学生</option>"
];
foreach ($student as $v) {
	$options[] = "<option value='".$v['id']."'>".$v['name']."</option>";
}
print_r($options);
?>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

访问 Gitee >>>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Monodyee/article/detail/148263
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号