zoukankan      html  css  js  c++  java
  • 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完全执行完之后,才能继续执行下面代码

  • 相关阅读:
    newifi3-D2 openwrt挂载u盘扩容/overlay
    # mac使用homebrew安装jdk和tomcat
    React学习小记--setState的同步与异步
    [vscode直接运行js文件报错]: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
    # js权威指南之对象篇
    # 初体验之腾讯位置服务彩云天气开发者api
    自用资源合集(持续更新)
    网页嵌入播客
    网页嵌入音乐歌单
    All live
  • 原文地址:https://www.cnblogs.com/bilibiliganbei/p/5616306.html
Copyright © 2011-2022 走看看