ajax最大的优点就在于可以局部刷新,用户体验很好。
用ajax实现级联可以在不刷新页面的情况下实现与服务器交互。
下面这个例子是,勾选不同的省,对应该省的城市会显示出来,并且数据从数据库读出来。
//html简单布局
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<style>
ul{
width: 500px;
height: 500px;
border: 1px solid black;
}
</style>
</head>
<body>
<?php <pre name="code" class="php"><span style="white-space:pre"> </span>//从数据库读出所有省
include('conn.php'); $sql = "select * from province";$result = mysql_query($sql);?>
<select id="province">
<option value="0">--省--</option>
<?php
<span style="white-space:pre"> </span><span style="white-space:pre"></span>//循环遍历所有省,并显示在select里
while($row = mysql_fetch_assoc($result)){
?>
<option value="<?php echo $row['id'] ?>"><?php echo $row['name'] ?></option>
<?php
}?>
</select><pre name="code" class="php">//这里存放所有的市
<select id="city">
</select>
//主要用的就是jquery里面的change事件,当下拉框中数据改变时,出发change事件,然后获得省份的id,通过ajax传到服务器端,查询到该省份的市有哪些。
<script>
$(document).ready(function () {
$("#province").change(function(event) {
var select_id = $("#province").val();
if(select_id != 0){
$.get("9-2.php",{id:select_id,t:Math.random()},function (data){
$("#city").html(data);
})
}
});
});
</script>
</body>
</html>
//9-2.php,得到相应的省,通过省来找所有的市在传回回调函数。
<?php
include('conn.php');
$shengid = $_GET['id'];
$sql = "select * from city where shengid=".$shengid;
$result = mysql_query($sql);
while($row = mysql_fetch_assoc($result)){
?>
<option value="<?php echo $row['id'] ?> "><?php echo $row['name'] ?></option>
<?php
}
?>