Ajax实现动态加载组合框的实例代码
发布时间：2023-05-15 13:03:37
下面是一个基本的Ajax实现动态加载组合框的实例代码，通过这个例子，我们可以更好地了解如何使用Ajax实现动态加载组合框。
HTML代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax实现动态加载组合框的实例代码</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<select id="province" name="province"></select>
<select id="city" name="city"></select>
<script>
$(document).ready(function() {
// Ajax动态加载省份选项
$("#province").load("area.php?action=provinces");
// 当省份选项发生改变时，动态加载城市选项
$("#province").change(function() {
$("#city").load("area.php?action=cities&pid=" + $("#province").val());
});
});
</script>
</body>
</html>
该HTML页面包括两个组合框，一个用于显示省份选项，另一个用于显示城市选项。需要注意的是，在页面加载完毕时，通过Ajax从服务器端动态加载省份选项并显示在组合框中。
在选择省份选项时，会向服务器端发送请求以获取该省份下的城市选项，并动态更新城市选项中的内容。
PHP代码（area.php）：
<?php
if ($_REQUEST["action"] == "provinces") {
echo "<option value=''>--请选择省份--</option>";
echo "<option value='1'>北京市</option>";
echo "<option value='2'>上海市</option>";
echo "<option value='3'>广东省</option>";
}
if ($_REQUEST["action"] == "cities") {
$pid = intval($_REQUEST["pid"]);
if ($pid == 1) {
echo "<option value=''>--请选择城市--</option>";
echo "<option value='1'>北京市</option>";
echo "<option value='2'>朝阳区</option>";
echo "<option value='3'>海淀区</option>";
}
if ($pid == 2) {
echo "<option value=''>--请选择城市--</option>";
echo "<option value='1'>上海市</option>";
echo "<option value='2'>黄浦区</option>";
echo "<option value='3'>徐汇区</option>";
}
if ($pid == 3) {
echo "<option value=''>--请选择城市--</option>";
echo "<option value='1'>广州市</option>";
echo "<option value='2'>深圳市</option>";
echo "<option value='3'>珠海市</option>";
}
}
?>
在该PHP文件中，处理省份和城市选项的请求，并返回对应的选项值。需要注意的是，我们使用“action”参数来区分不同的请求类型，以获取对应的响应结果。
通过这个例子，我们可以很明显地看到，Ajax能够帮助我们实现动态的Web应用程序，以提高用户体验和应用程序的交互性。