• 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完全执行完之后,才能继续执行下面代码

  • 相关阅读:
    方维分享系统,分享的用户得到商品的佣金
    方维采集失败,方维后台采集不了怎么办
    thinkphp 的 URL 中的 & 被转义成了 &amp; 成了死链接
    PHP用curl采集天猫详细页
    xampp1.8.3 配置 php5.x 访问 SQL Server 2008
    ArcGIS 10 线转点 polyline to points
    使用BCP从Sybase远程数据库中导出数据
    百度UEditor添加视频 增加支持“通用代码”功能,支持微信
    firefox修改user-agent
    Twitter Storm学习笔记
  • 原文地址:https://www.cnblogs.com/sdzbxfcy/p/5616712.html
Copyright © 2020-2023  润新知