PHP基础 + Ajax实现三级联动

本文详细介绍了如何使用HTML、jQuery和PHP实现三级联动查询功能,以学校、班级、学生为例。首先展示所有学校,选择学校后动态加载对应班级,再选择班级加载对应学生。示例代码包括数据库设计、页面准备、班级和学生数据的AJAX请求处理。
摘要由CSDN通过智能技术生成


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

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

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

一、本案例涉及的知识
  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>

三、选择学校查询班级

首先监听学校下拉框的值改变,改变后使用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>

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);
?>
四、选择班级查询学生

监听班级下拉框的值改变,改变后使用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>

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. 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;

(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;

(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;
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>

(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);
?>

(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);
?>

访问 Gitee >>>

  • 16
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
以下是一个简单的基于 jQueryAjax 实现省市县三级联动的示例代码: HTML 代码: ```html <select id="province"> <option value="">请选择省份</option> </select> <select id="city"> <option value="">请选择城市</option> </select> <select id="district"> <option value="">请选择区县</option> </select> ``` JavaScript 代码: ```javascript $(function() { // 加载省份列表 $.ajax({ url: 'province.php', type: 'GET', dataType: 'json', success: function(data) { $.each(data, function(index, province) { $('#province').append('<option value="' + province.id + '">' + province.name + '</option>'); }); } }); // 加载城市列表 $('#province').change(function() { var provinceId = $(this).val(); if (provinceId != '') { $.ajax({ url: 'city.php', type: 'GET', dataType: 'json', data: {provinceId: provinceId}, success: function(data) { $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区县</option>'); $.each(data, function(index, city) { $('#city').append('<option value="' + city.id + '">' + city.name + '</option>'); }); } }); } else { $('#city').empty().append('<option value="">请选择城市</option>'); $('#district').empty().append('<option value="">请选择区县</option>'); } }); // 加载区县列表 $('#city').change(function() { var cityId = $(this).val(); if (cityId != '') { $.ajax({ url: 'district.php', type: 'GET', dataType: 'json', data: {cityId: cityId}, success: function(data) { $('#district').empty().append('<option value="">请选择区县</option>'); $.each(data, function(index, district) { $('#district').append('<option value="' + district.id + '">' + district.name + '</option>'); }); } }); } else { $('#district').empty().append('<option value="">请选择区县</option>'); } }); }); ``` 省份列表数据接口(province.php)返回 JSON 数据格式: ```json [ {"id": "110000", "name": "北京市"}, {"id": "120000", "name": "天津市"}, // 省份数据... ] ``` 城市列表数据接口(city.php)根据省份 ID 返回 JSON 数据格式: ```json [ {"id": "110100", "name": "北京市"}, {"id": "110200", "name": "县城市"}, // 城市数据... ] ``` 区县列表数据接口(district.php)根据城市 ID 返回 JSON 数据格式: ```json [ {"id": "110101", "name": "东城区"}, {"id": "110102", "name": "西城区"}, // 区县数据... ] ``` 以上是一个简单的 jQueryAjax 实现省市县三级联动的示例代码,你可以根据自己的需求进行修改和扩展。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

相逢不晚何必匆匆

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值