jquery 的三级地址联动，原理与javascript类似，只是在触发请求的时候，使用封装好的 $.get ,$post,$.ajax 方法去执行，其余的都是一样的，后台服务器请求文件是一样的，前台html样式和方法也是一样的
1. 写一个 服务器文件 server_jquery.php ，如下：
1 <?php 2 // 服务器连接 3 mysql_connect("localhost","root","root") or die(mysql_error()); 4 // 数据库选定 5 mysql_select_db("ajax_demo"); 6 // 字符编码设定 7 mysql_query("set names utf8"); 8 $list = array(); 9 // 判定请求的ID是不是省级请求，如果是，则执行sql数据库查询，调用对应的省级区域下面的城市 10 if(isset($_REQUEST['province_id'])){ 11 $sql = "select * from ecs_region where parent_id=".$_REQUEST['province_id']; 12 $res = mysql_query($sql); 13 while( $row= mysql_fetch_assoc($res)){ 14 array_push($list,$row); 15 }; 16 // 将获取的数据转换成json 格式 17 echo json_encode($list); 18 // 判定请求的ID是不是城市级请求，如果是，则执行sql数据库查询，调用对应的城市区域下面的区县 19 }else if(isset($_REQUEST['city_id'])){ 20 $sql = "select * from ecs_region where parent_id=".$_REQUEST['city_id']; 21 $res = mysql_query($sql); 22 while($row=mysql_fetch_assoc($res)){ 23 array_push($list,$row); 24 } 25 // 将获取的数据转换成json 格式 26 echo json_encode($list); 27 }; 28 ?>
2. 使用$.get() 方法写请求文件：jquery_get_sanji.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<script>
$(function(){
var Osheng = $("#province");
Osheng.on("change",function(){
var Id = $(this).val();
var url = "server_jquery.php";
$.get(url,{"province_id":Id},function(res){
var obj = JSON.parse(res);
var city = '';
var OCity = $("#city");
city = "<option value='0'>请选择城市</option>";
for(var i in obj){
city += "<option value='" + obj[i].region_id + "'>"+ obj[i].region_name + "</option>" ;
};
OCity.html( city );
});
});
var Ochengshi = $("#city");
Ochengshi.on('change',function(){
var Id = $(this).val();
var url = "server_jquery.php";
$.get(url,{"city_id":Id},function(res){
var obj = JSON.parse(res);
var district = '';
var Odistrict = $("#district");
district = "<option value='0'>请选择区域</option>";
for(var i in obj){
district += "<option value='"+ obj[i].region_id +"'>" + obj[i].region_name + "</option>";
};
Odistrict.html(district);
});
});
});
</script>
</head>
<body>
<?php
mysql_connect("localhost","root","root") or die(mysql_error());
mysql_select_db("ajax_demo");
mysql_query("set names utf8");
?>
<select name="province" id="province">
<option value="0">请选择省份</option>
<?php
$sql = "select * from ecs_region where parent_id=1";
$res = mysql_query($sql);
while($row=mysql_fetch_assoc($res)){
?>
<option value="<?php echo $row['region_id'];?>"><?php echo $row['region_name']; ?></option>
<?php
}
?>
</select>
<select name="city" id="city">
<option value="0">请选择城市</option>
</select>
<select name="district" id="district">
<option value="0">请选择区县</option>
</select>
</body>
</html>
运行结果：
3. 使用$.post()方法写请求文件：只是需要把 get 改成 post 就可以了，服务文件可以共用，因为在服务文件里，接受参数使用的是 $_REQUEST，它可以接受get 方式的数据，也可以接受post方式的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<title>Document</title>
<script>
$(function(){
var Osheng = $("#province");
Osheng.on("change",function(){
var Id = $(this).val();
var url = "server_jquery.php";
$.post(url,{"province_id":Id},function(res){
var obj = JSON.parse(res);
var city = '';
var OCity = $("#city");
city = "<option value='0'>请选择城市</option>";
for(var i in obj){
city += "<option value='" + obj[i].region_id + "'>"+ obj[i].region_name + "</option>" ;
};
OCity.html( city );
});
});
var Ochengshi = $("#city");
Ochengshi.on('change',function(){
var Id = $(this).val();
var url = "server_jquery.php";
$.post(url,{"city_id":Id},function(res){
var obj = JSON.parse(res);
var district = '';
var Odistrict = $("#district");
district = "<option value='0'>请选择区域</option>";
for(var i in obj){
district += "<option value='"+ obj[i].region_id +"'>" + obj[i].region_name + "</option>";
};
Odistrict.html(district);
});
});
});
</script>
</head>
<body>
<?php
mysql_connect("localhost","root","root") or die(mysql_error());
mysql_select_db("ajax_demo");
mysql_query("set names utf8");
?>
<select name="province" id="province">
<option value="0">请选择省份</option>
<?php
$sql = "select * from ecs_region where parent_id=1";
$res = mysql_query($sql);
while($row=mysql_fetch_assoc($res)){
?>
<option value="<?php echo $row['region_id'];?>"><?php echo $row['region_name']; ?></option>
<?php
}
?>
</select>
<select name="city" id="city">
<option value="0">请选择城市</option>
</select>
<select name="district" id="district">
<option value="0">请选择区县</option>
</select>
</body>
</html>
运行结果：
4. 使用$.ajax() 方法请求文件：jquery_ajax_sanji.php
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 8 <title>Document</title> 9 <script> 10 $(function(){ 11 var Osheng = $("#province"); 12 Osheng.on("change",function(){ 13 var Id = $(this).val(); 14 var url = "server_jquery.php"; 15 $.ajax({ 16 "url":url, // 请求地址 17 "type":"post", // 请求方式 18 "data":{ // 请求参数 19 "province_id":Id, 20 }, 21 "dataType":"json", // 数据返回的格式 22 "success":function(obj){ // 请求成功执行的函数 23 var city = ''; 24 var OCity = $("#city"); 25 city = "<option value='0'>请选择城市</option>"; 26 for(var i in obj){ 27 city += "<option value='" + obj[i].region_id + "'>"+ obj[i].region_name + "</option>" ; 28 }; 29 OCity.html( city ); 30 } 31 }) 32 }); 33 var Ochengshi = $("#city"); 34 Ochengshi.on('change',function(){ 35 var Id = $(this).val(); 36 var url = "server_jquery.php"; 37 $.ajax({ 38 "url":url, // 请求地址 39 "type":"post", // 请求方式 40 "data":{ // 请求参数 41 "city_id":Id, 42 }, 43 "dataType":"json", // 数据返回的格式 44 "success": function(obj){ // 请求成功执行的函数 45 var district = ''; 46 var Odistrict = $("#district"); 47 district = "<option value='0'>请选择区域</option>"; 48 for(var i in obj){ 49 district += "<option value='"+ obj[i].region_id +"'>" + obj[i].region_name + "</option>"; 50 }; 51 Odistrict.html(district); 52 } 53 }); 54 }); 55 }); 56 </script> 57 58 </head> 59 <body> 60 <?php 61 mysql_connect("localhost","root","root") or die(mysql_error()); 62 mysql_select_db("ajax_demo"); 63 mysql_query("set names utf8"); 64 ?> 65 <select name="province" id="province"> 66 <option value="0">请选择省份</option> 67 <?php 68 $sql = "select * from ecs_region where parent_id=1"; 69 $res = mysql_query($sql); 70 while($row=mysql_fetch_assoc($res)){ 71 ?> 72 <option value="<?php echo $row['region_id'];?>"><?php echo $row['region_name']; ?></option> 73 <?php 74 } 75 ?> 76 </select> 77 <select name="city" id="city"> 78 <option value="0">请选择城市</option> 79 </select> 80 <select name="district" id="district"> 81 <option value="0">请选择区县</option> 82 </select> 83 </body> 84 </html>
运行结果：
在jquery ajax请求中，$.get(),$.post()都是$.ajax()方法的简写，这两种方式都可以使用ajax方法进行替换。$.ajax()请求提供的参数更多，更加全面