基于ajax的级联下拉菜单实验报告
时间: 2023-07-06 13:05:53 浏览: 166
实验目的:
1.了解ajax的基本原理和应用场景;
2.掌握使用ajax实现级联下拉菜单的方法;
3.加深对JavaScript和HTML的理解。
实验原理:
AJAX(Asynchronous JavaScript and XML)即异步JavaScript和XML。它是一种创建快速动态网页的技术,它使用JavaScript和XML来实现异步数据交换。其优点在于能够在不重新加载整个网页的情况下,动态地更新部分网页内容,提高了用户体验。
级联下拉菜单是指一个下拉菜单的选择会影响到另一个下拉菜单的选项。比如,第一个下拉菜单是选择国家,第二个下拉菜单就会根据国家的选择而显示该国家的省份。这种下拉菜单的实现需要使用ajax技术。
实验过程:
1.设计HTML页面,包括两个下拉菜单和一个显示结果的div:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>级联下拉菜单</title>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#country").change(function(){
var country = $("#country").val();
$.ajax({
type:"post",
url:"province.php",
data:{country:country},
dataType:"json",
success:function(data){
$("#province").empty();
$.each(data,function(i,item){
var option = "<option value='" + item.province_id + "'>" + item.province_name + "</option>";
$("#province").append(option);
});
},
error:function(jqXHR){
alert("发生错误:" + jqXHR.status);
}
});
});
});
</script>
</head>
<body>
<div>
<select id="country">
<option value="">请选择国家</option>
<option value="CN">中国</option>
<option value="US">美国</option>
<option value="JP">日本</option>
</select>
<select id="province">
<option value="">请选择省份</option>
</select>
</div>
<div id="result"></div>
</body>
</html>
```
2.设计PHP文件province.php,用于接收ajax请求并返回对应的省份信息:
```
<?php
header("Content-type:application/json;charset=utf-8");
$country = $_POST["country"];
if ($country == "CN") {
$result = array(
array("province_id"=>"1", "province_name"=>"北京"),
array("province_id"=>"2", "province_name"=>"上海"),
array("province_id"=>"3", "province_name"=>"广东")
);
} elseif ($country == "US") {
$result = array(
array("province_id"=>"4", "province_name"=>"纽约"),
array("province_id"=>"5", "province_name"=>"洛杉矶"),
array("province_id"=>"6", "province_name"=>"芝加哥")
);
} elseif ($country == "JP") {
$result = array(
array("province_id"=>"7", "province_name"=>"东京"),
array("province_id"=>"8", "province_name"=>"大阪"),
array("province_id"=>"9", "province_name"=>"京都")
);
}
echo json_encode($result);
?>
```
3.在浏览器中打开HTML页面,选择国家后,会自动刷新省份下拉菜单,并在结果div中显示省份信息。
实验结论:
通过ajax技术,可以实现级联下拉菜单。在选择第一个下拉菜单的选项后,可以动态地更新第二个下拉菜单的选项,提高网页的交互性和用户体验。
阅读全文