AJAX 三级联动

新的封装类

<?php
class DBDA
{
    public $host="localhost";//服务器地址
    public $uid="root";//用户名
    public $pwd="";//密码
    
    public $conn;//连接对象
    //操作数据库的方法
    //$sql代表需要执行的SQL语句
    //$type代表SQL语句的类型，1代表查询，0代表增删改
    //$db代表要操作的数据库名称
    //如果是查询，返回二维数组
    //如果是其他语句，返回true或false
    function __construct($db="bilibili")
    {
        //造连接对象
        $this->conn = new MySQLi($this->host,$this->uid,$this->pwd,$db);
    }
        public function Query($sql,$type=1)
        {
            //判断是否出错
            !mysqli_connect_error() or die("连接失败！");
            //执行SQL语句
            $result = $this->conn->query($sql);
            
            //判断SQL语句类型
            if($type==1)
            {
                //如果是查询语句,返回结果集的二维数组
                return $result->fetch_all();
            }
            else
            {
                //如果是其他语句,返回true或false
                return $result;
            }
        }
        //Ajax调用返回JSON
        public function JsonQuery($sql,$type=1,$db="bilibili")
        {
            //定义数据源
            $dsn = "mysql:dbname={$db};host={$this->host}";
            //造pdo对象
            $pdo = new PDO($dsn,"{$this->uid}","{$this->pwd}");
            //准备执行SQL语句
            $st = $pdo->prepare($sql);
            //执行预处理SQL语句
            if($st->execute())
            {
                if($type==1)
                {
                    $sttr = $st->fetchAll(PDO::FETCH_ASSOC);
                    return json_encode($attr);
                }
                else
                {
                    if($st)
                    {
                        return "OK";
                    }
                    else
                    {
                        return "NO";
                    }
                }
            }
            else
            {
                echo "执行失败！";
            }
        }
        //Ajax调用返回字符串
        public function StrQuery($sql,$type=1)
        {
            //判断连接是否成功
            !mysqli_connect_error() or die("连接失败！");
            //执行SQL语句
            $result = $this->conn->query($sql);
            //判断SQL语句类型
            if($type==1)
            {
                $attr = $result->fetch_all();
                $str = "";
                //如果是查询语句返回字符串
                for($i=0;$i<count($attr);$i++)
                {
                    for($j=0;$j<count($attr[$i]);$j++)
                    {
                        $str = $str.$attr[$i][$j];
                        $str = $str."^";
                    }
                    $str = substr($str,0,strlen($str)-1);
                    $str = $str."|";
                }
                $str = substr($str,0,strlen($str)-1);
                return $str;
            }
            else
            {
                //如果是其他语句,返回true或false
                if($result)
                {
                    return "OK";
                }
                else
                {
                    return "NO";
                }
            }
        }
        function PdoQuery($sql,$type=1,$db="bilibili")
        {
            //造数据源
            $dns = "mysql:host={$this->host};dbname={$db}";
            //造pdo对象
            $pdo = new PDO($dns,$this->uid,$this->pwd);
            //准备一条SQL语句
            $stm = $pdo->prepare($sql);
            //执行预处理语句
            $r = $stm->execute();
            if($r)
            {
                if($type==1)
                {
                    return $stm->fetchAll();
                }
                else
                {
                    return "OK"; 
                }
            }
            else
            {
                return "NO";
            }
            
        }
}
View Code

三级联动

<!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
$(document).ready(function(e) {
    
    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:"AJAX4chuli.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:"AJAX4chuli.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:"AJAX4chuli.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);
            
            }
        
        })
        
}
View Code
<?php
include("DBDA.php");
$db = new dbda();

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

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

echo $db->StrQuery($sql);
View Code

AJAX：异步AJAX

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

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

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/bilibiliganbei/p/5616306.html