zoukankan      html  css  js  c++  java
  • ajax练习习题二三级联动

    异步执行

    1数据传输收发数据的时候不用等待对方接受,可以继续发送

    2Ajax 在调用处理页面处理数据的时候,下面的代码可以继续执行,效率高

    同步执行

    1收发数据的时候要等到对方接受的成功,才可以继续发送下一个

    2ajax 在调用处理页面数据的时候,下面的代码不能执行,只有当ajax完全执行完之后,才能继续执行下面代码

    Async :false 关闭异步,开启同步

    显示页面

    <!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 type="text/javascript" src="../../popwindow/jquery-1.11.2.min.js"></script>
    </head>
    
    <body>
    <div id="sanji"></div>
    </body>
    <script type="text/javascript">
    $(document).ready(function(e) {
        //创建表单
     var zhuti="<select size='1' id='sheng'></select><select size='1' id='shi'></select><select size='1' id='qu'></select>";
          $("#sanji").html(zhuti);
          //填充sheng
            FillSheng();
          //填充shi
            FillShi();
          //填充qu
            Fillqu();
            //当选中省变化的时候去填充市和区
            $("#sheng").change(function(e) {
                //填充shi
            FillShi();
          //填充qu
            Fillqu();
            
             });
            //当市选中的时候去选中区
            $("#shi").change(function(e) {
               //填充qu
            Fillqu(); 
            });
            
            
    });  
    function FillSheng()
    {
        var pcode="0001";//省的父级代号
        //调用ajax
        $.ajax({
            async:false,//关闭同步开启同步关闭异步
              url:"chuli.php",
            type:"POST",
            dataType:"text" ,
            data:{pcode:pcode},
            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",
            type:"POST",
            dataType:"text" ,
            data:{pcode:pcode},
            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({
            async:false,//关闭同步开启同步关闭异步
              url:"chuli.php", 
            type:"POST",
            dataType:"text" ,
            data:{pcode:pcode},
            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);
        }
        });
        
    }
    </script>
    </html>

    处理页面

    <?php
    //接受父级代号
    $pcode=$_POST["pcode"];
    include ("../DBDA.class.php");
    $db=new DBDA();
    //根据父代号查询
    $sql="select * from chinastates where parentareacode='{$pcode}'";
    echo $db->StrQuery($sql);

    封装类

    <?php
    class DBDA
    {
        public $host="localhost";    //服务器地址
        public $uid="root";             //用户名
        public $pwd="";             //密码
        
        public $dbconnect; //连接对象
        
        //操作数据库的方法
        //$sql代表需要执行的SQL语句
        //$type代表SQL语句的类型,1代表查询,2代表增删改
        //$dbname代表要操作的数据库名称
        //如果是查询,返回二维数组
        //如果是增删改,返回true或false
    
        /*ajax text 返回类型*/
        public function StrQuery($sql,$type=2,$dbname="1")
        {
            //造连接对象
            $this->dbconnect= new MYSQLi($this->host,$this->uid,$this->pwd,$dbname);
            if (!mysqli_connect_error())
            {
                //如果连接成功,执行sql语句
                $result = $this->dbconnect->query($sql);
                //根据语句判断
                if($type==2)
                {        
                    $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";
                }
                }
            }
            else
            {    
                 return "连接失败";
            }
        }
    }

  • 相关阅读:
    R语言中基于混合数据抽样(MIDAS)回归的HAR-RV模型预测GDP增长
    R语言马尔可夫体制转换模型Markov regime switching
    php设计模式--简单介绍
    css字体图标的使用方法
    linux系统管理--top命令
    linux系统管理--查看进程
    linux系统管理--进程管理
    用户体验时代的9条建议
    【转】纯手工玩转 Nginx 日志
    【转】一分钟内检查Linux服务器性能
  • 原文地址:https://www.cnblogs.com/zoubizhici/p/5616064.html
Copyright © 2011-2022 走看看