5月20 三级联动

三级联动

注意事项及做题思路：

通过查询数据库,通过父级代号查询相应省市区.

在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>

View Code

引用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);
                
                }
            });    
    }
    
});

View Code

同步异步复习

Ajax默认是异步的.
在Ajax里面
同步的是指在ajax处理数据的时候,必须等到处理完才能执行下面的语句
异步就是在ajax处理数据的时候,不用等到处理完 ,下面语句就可以执行

同步在交换信息时,必须等到对方确认接收后再发送下一条
异步在交换信息时,只管向对方发送,不用管对方有没有答复

表现在线程上,同步相当于单线程处理一个请求,
异步相当于多线程同时处理多个

posted @ 2016-05-20 19:40 Durriya 阅读(169) 评论(0) 编辑收藏举报

Durriya

5月20 三级联动

主页面代码：

引用js代码：

公告