异步执行

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. asp.net动态添加GridView的模板列，并获取列值

    一.动态添加模板列: 1.建立模板列样式: 说明:下边代码可以直接写在aspx文件中,也可以单独建立cs文件:另外,我没有写button.linkButton等控件,意思差不多,不过当需要添加事件时, ...

  2. MySQL 分组

    MySQL GROUP BY 语句 GROUP BY 语句根据一个或多个列对结果集进行分组. 在分组的列上我们可以使用 COUNT, SUM, AVG,等函数. GROUP BY 语法 SELECT ...

  3. Ombrophobic Bovines - POJ 2391

    Description FJ's cows really hate getting wet so much that the mere thought of getting caught in the ...

  4. SPOJ - DQUERY 主席树

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=32356 Given a sequence of n numbers ...

  5. Application, JDBC, 数据库连接池, Session, 数据库的关系

    RT,这几个东东已经困扰我很长一段时间了... 这次争取把她们理清楚了! 参考资料: 1. 数据库连接池:http://www.cnblogs.com/shipengzhi/archive/2011/ ...

  6. 原生js实现中文时钟

    零.寒暄 终于一个月可以更新两篇博客了,开心.昨天花了大概一天的时间玩了下github,基本的clone和push都搞定了,如果有和我一样的新手没调通的,大家可以交流. 另外,说个题外话,大家发现我的 ...

  7. html5 webApp常用Meta标签

    Html5 webApp常用Meta标签 <meta charset="UTF-8"> <meta name="viewport" conte ...

  8. 如何使用CSL（翻译总结自TI官方文档）

    为了使用CSL来进行编译和连接,必须先配置CCS开发环境. 1.指定目标设备 Project/options/complier/preprocessor,在define symbols中输入设备支持符 ...

  9. Red hat Linux 安装Node.js 源码安装

    1. 下载源码包 http://nodejs.org/dist/v0.10.29/node-v0.10.29.tar.gz 2.准备安装环境,>python2.6, gcc, g++ pytho ...

  10. zend studio 快捷键收集

    Ctrl + /            单行注释 Ctrl + Shift + / 添加块注释 Ctrl + Shift + \   移除块注释 Ctrl + Shift + F 调整代码格式 Ctr ...