AJax 三级联动

 1、主页面

<title>无标题文档</title>
<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
</head>

<body>
<!--为了方便以后使用，我们在主页面仅仅写一个div，新建一个页面写script代码，将其设置成为一个插件，方便以后的调用-->
<div id="sanji"></div>
</body>
</html>

2、script代码

// JavaScript Document
$(document).ready(function(e) {
    //写三个select下拉列表
	var zhuti = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>";
	$("#sanji").html(zhuti);
	
	//填充省
	FillSheng();
	//填充市
	FillShi();
	//填充区
	FillQu();
	
	//当省选中变化的时候去填充市和区
	$("#sheng").change(function(){
		
		//填充市
		FillShi();
		//填充区
		FillQu();
		
		})
	//当市选中变化的时候去填充区
	$("#shi").change(function(){
		//填充区
		FillQu();
		
		})
	
});
//填充省的方法
function FillSheng()
{
	//省的父级代号
	var pcode = "0001";
	
	//调用AJAX
	$.ajax({
		async:false, //关闭异步，开启同步
		url:"chuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				//拆分返回的字符串，得到行的数组
				var hang = data.trim().split("|");
				var str = "";
				for(var i=0; i<hang.length;i++)
				{
					//返回列的数组
					var lie = hang[i].split("^");
					str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
				}
				
				$("#sheng").html(str);
			}
		});
}

//填充市的方法
function FillShi()
{
	//取到市的父级代号
	var pcode = $("#sheng").val();
	//调用AJAX
	$.ajax({
		async:false,
		url:"chuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				var hang = data.trim().split("|");
				var str = "";
				for(var i=0;i<hang.length;i++)
				{
					var lie = hang[i].split("^");
					str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
				}
				$("#shi").html(str);
			}
		});
}
//填充区的方法
function FillQu()
{
	//找到区的父级代号
	var pcode = $("#shi").val();
	//调用AJAX
	$.ajax({
		url:"chuli.php",
		data:{pcode:pcode},
		type:"POST",
		dataType:"TEXT",
		success: function(data){
				var hang = data.trim().split("|");
				var str = "";
				for(var i=0;i<hang.length;i++)
				{
					var lie = hang[i].split("^");
					str = str+"<option value='"+lie[0]+"'>"+lie[1]+"</option>";
				}
				$("#qu").html(str);
			}
		
		});
}

3、处理页面

我们从数据库中查询行政区，是根据父级代号查询子级区域，因此，在整个过程中，我们只需要写一个php处理页面，之后反复调用即可

<?php
include("../DBDA.php");
$db = new DBDA();

//接收父级代号
$pcode = $_POST["pcode"];

//根据父级代号查子级区域
$sql = "select * from ChinaStates where ParentAreaCode='{$pcode}'";

echo $db->StrQuery($sql);

?>

注：AJAX：异步AJAX

异步：
1.数据传输：收发数据的时候不用等到对方接收，可以继续发送
2.AJAX：在调用处理页面处理数据的时候，下面的代码可以继续执行，效率高

同步：
1.数据传输：收发数据的时候要等到对方接收成功，才可以继续发送下一个
2.AJAX：在调用处理页面处理数据的时候，下面的代码不能执行，只有当AJAX完全执行完之后，才能继续执行下面代码

posted @ 2016-06-25 18:31  江南渔雾  阅读(205)  评论(0)    收藏  举报