异步执行

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="";//省的父级代号

    //调用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=; i<hang.length;i++)

         {

            var lie= hang[i].split("^");

            str=str+"<option value='"+lie[]+"'>"+lie[]+"</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=; i<hang.length;i++)

         {

            var lie= hang[i].split("^");

            str=str+"<option value='"+lie[]+"'>"+lie[]+"</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=; i<hang.length;i++)

         {

            var lie= hang[i].split("^");

            str=str+"<option value='"+lie[]+"'>"+lie[]+"</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=,$dbname="")

    {

        //造连接对象

        $this->dbconnect= new MYSQLi($this->host,$this->uid,$this->pwd,$dbname);

        if (!mysqli_connect_error())

        {

            //如果连接成功，执行sql语句

            $result = $this->dbconnect->query($sql);

            //根据语句判断

            if($type==)

            {

                $attr=$result->fetch_all();

                $str="";

                    //如果是查询语句返回字符串

                for($i=;$i<count($attr);$i++)

                {

                    for($j=;$j<count($attr[$i]);$j++)

                    {

                    $str = $str.$attr[$i][$j];

                    $str = $str."^";

                    }

                    $str = substr($str,,strlen($str)-);

                    $str = $str."|";

                }

                $str = substr($str,,strlen($str)-);

                return $str;

            }

            else

            {

                    //如果是其他语句,返回true或false

            if($result){

                return "OK";

            }else{

                return "NO";

            }

            }

        }

        else

        {

             return "连接失败";

        }

    }

}

ajax练习习题二三级联动的更多相关文章

  1. 使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

    使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下 ...

  2. 多级联动系列——ajax调用XML实现三级联动

    ajax 使用起来特别的方便,再也不操心浏览器兼容问题了.用ajax调用XML页面中的内容,来生成三级联动,OK废话不多说,跟着我一步步写吧. 首先写一个XML文件.data.xml <?xml ...

  3. 【2017-06-06】Ajax完整结构、三级联动的制作

    一.Ajax完整结构 $.ajax({ url:"Main.ashx", data:{}, dataType:"json", type:"post&q ...

  4. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

  5. ajax加php实现三级联动

    js代码 <script type="text/javascript">    function get_next(t,pid){  //当前元素的id,当前optio ...

  6. Ajax做无刷新三级联动

    1.引入JS and Jquery包 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " ...

  7. 如何用jquery+ajax写省市区的三级联动？（封装和不封装两种方式）-----2017-05-14

    首先,要实现如下图效果, 1.要理清思路: 先做出三个下拉菜单----根据第一个下拉菜单的value值获取第二个下拉列表的内容,第三个同理. 2.用到的数据库表:Chinastates表 规律:根据国 ...

  8. ajax 城市区域选择三级联动

    <body onLoad="sheng()"><div class="xqbody">    <form action=" ...

  9. Ajax省市地区下拉列表三级联动

    SQL数据库表 --创建Province表 CREATE TABLE [dbo].[Province]( [Id] [int] NULL, [Name] [varchar](50) NULL, [or ...

随机推荐

  1. GB28181国检推流

    GB28181国检有一向内容是实时播放摄像机流,经过一番努力,搞定这个功能,现分享心得: 首先需要了解流程,说简答点就是视频流从哪里来到什么地方去,下图描述了视频流推流,转发的 基本过程:信令交互成功 ...

  2. perl随记(1)

    chmod 755 test,改变文件权限,rwx 421 chomp,如果字符串结尾有换行符,chomp 可以去掉它 正则表达式量词:*表示有或无,+表示1或多,?表示0或1 my,局部变量,只在定 ...

  3. SL410K 在Ubuntu禁用触摸板

    由于之前把系统自带的恢复去了,然后TouchPad一直不能禁用,而后我的410k就只装上ubuntu,想不到在ubuntu上,禁用/启用 触摸板这么方便. http://askubuntu.com/q ...

  4. 四则运算.html

    <DOCTYPE   html   PUBLTC"-//W3C//DTD   XHTML   1.0   Transitional//EN" "http://www ...

  5. matrix_2015_1 138 - ZOJ Monthly, January 2015

    http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3844 第一个,n个数,每次操作最大数和最小数都变成他们的差值,最后n个数相 ...

  6. [工作积累] android 中添加libssl和libcurl

    1. libssl https://github.com/guardianproject/openssl-android 然后执行ndk-build 2.libcurl 源代码组织结构, 下面的mak ...

  7. 7 linux服务器程序规范

    1. Linux服务器程序一般以后台进程形式运行.后台进程又称守护进程(daemon),它没有控制终端,因而不会意外接收到用户输入.父进程通常为init(PID为1的进程)2. Linux服务器程序常 ...

  8. 全栈式JavaScript

    如今,在创建一个Web应用的过程中,你需要做出许多架构方面的决策.当然,你会希望做的每一个决定都是正确的:你想要使用能够快速开发的技术,支持持续的迭代,最高的工作效率,迅速,健壮性强.你想要精益求精并 ...

  9. ubuntu安装后没有root密码

    新安装的ubuntu没有设置root密码,也就不能登录到root账户下.要想设置root密码需要在当前账户下输入sudo passwd,然后输入当前用户的密码,然后输入两次root的新密码,即可完成r ...

  10. eclipse 自动 注释

    在使用Eclipse 编写Java代码时,自动生成的注释信息都是按照预先设置好的格式生成的. 修改作者.日期注释格式:打开Windows->Preferences->Java->Co ...