三级联动
注意事项及做题思路：
通过查询数据库,通过父级代号查询相应省市区.
在js页面实现三级联动
在JQuery中调用Ajax方法(引用JQuery文件一定放在最上面)
用插件的形式,创建三个下拉列表
主页面代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>三级联动</title>
<script src="../jquery-1.11.2.min.js"></script>
<script src="sanji.js"></script>
</head>
<body>
<div id="sanji"></div>
</body>
</html>
引用js代码：
// JavaScript Document $(document).ready(function(e) { $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); //填充内容 //1.填充省 FillSheng(); //2.填充市 FillShi(); //3.填充区 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 str = ""; var hang = data.split("|"); for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); 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 str = ""; var hang = data.split("|"); for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#shi").html(str); } }); } //填充区的方法 function FillQu() { //找到父级代号 var pcode = $("#shi").val(); //调用AJAX $.ajax({ async:false, url:"chuli.php", data:{pcode:pcode},//前面可以随便写，后边必须一定 type:"POST", dataType:"TEXT", success: function(data){ var str = ""; var hang = data.split("|"); for(var i=0;i<hang.length;i++) { var lie = hang[i].split("^"); str += "<option value='"+lie[0]+"'>"+lie[1]+"</option>"; } $("#qu").html(str); } }); } });
同步异步复习
Ajax默认是异步的.
在Ajax里面
同步的是指在ajax处理数据的时候,必须等到处理完才能执行下面的语句
异步就是在ajax处理数据的时候,不用等到处理完 ,下面语句就可以执行
同步在交换信息时,必须等到对方确认接收后再发送下一条
异步在交换信息时,只管向对方发送,不用管对方有没有答复
表现在线程上,同步相当于单线程处理一个请求,
异步相当于多线程同时处理多个