ajax开发：ajax三级省市区联动

本文实例为大家分享了ajax三级联动展示的具体代码，供大家参考，具体内容如下

1. test.php

?

1 2 3 4 5 6 7 8 9 10 11

< script src = "../jquery-1.11.2.min.js" ></ script > < script src = "sanji.js" ></ script > < title >无标题文档</ title > </ head >   < body > < h1 >三级联动</ h1 > < div id = "sanji" ></ div >   </ body > </ html >

2. sanji.js

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95

// JavaScript Document $(document).ready( function (e) {   //找到ID=SANJI的DIV，造三个下拉扔进去   $( "#sanji" ).html( "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>" );      //加载省的数据   LoadSheng();   //加载市的数据   LoadShi();   //加载区的数据   LoadQu();      //给省的下拉加点击事件   $( "#sheng" ).click( function (){     //重新加载市     LoadShi();     //重新加载区     LoadQu();    })   //给市的下拉加点击事件   $( "#shi" ).click( function (){     //重新加载区     LoadQu();    })    }); //加载省份的方法 function LoadSheng() {   //省的父级代号   var pcode = "0001" ;   $.ajax({    async: false ,    url: "chuli.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 LoadShi() {   //找市的父级代号   var pcode = $( "#sheng" ).val();   $.ajax({    async: false ,    url: "chuli.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 LoadQu() {   //找区的父级代号   var pcode = $( "#shi" ).val();   $.ajax({    url: "chuli.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);    }   }); }

3. chuli.php

?

1 2 3 4 5 6 7 8 9

<?php //给一个父级代号，返回该父级代号下所有的子地区 require "DBDA.class.php" ; $db = new DBDA(); $pcode = $_POST [ "pcode" ];     $sql = "select areacode,areaname from chinastates where parentareacode='{$pcode}'" ; echo $db ->StrQuery( $sql );

引用的封装类里面返回字符串的方法

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61

<?php class DBDA {   public $host = "localhost" ;   public $uid = "root" ;   public $pwd = "123" ;   public $dbname = "test_123" ;   //执行SQL语句返回相应的结果   //$sql 要执行的SQL语句   //$type 代表SQL语句的类型，0代表增删改，1代表查询   function query( $sql , $type =0)   {    $db = new MySQLi( $this ->host, $this ->uid, $this ->pwd, $this ->dbname);        $result = $db ->query( $sql );        if ( $type )    {     //如果是查询，显示数据     return $result ->fetch_all();    }    else    {     //如果是增删改，返回true或者false     return $result ;    }   }      //返回字符串的方法   public function strquery( $sql , $type =1)   {    $db = new MySQLi( $this ->host, $this ->uid, $this ->pwd, $this ->dbname);    $result = $db ->query( $sql );    $arr = $result ->fetch_all();    $str = "" ;    foreach ( $arr as $v )    {     $str = $str .implode( "^" , $v ). "|" ;    }        $str = substr ( $str ,0, strlen ( $str )-1);    return $str ;     }      //返回JSON   function JSONQuery( $sql , $type =1)   {    $db = new MySQLi( $this ->host, $this ->uid, $this ->pwd, $this ->dbname);    $r = $db ->query( $sql );        if ( $type ==1)    {     return json_encode( $r ->fetch_all(MYSQLI_ASSOC));    }    else    {     return $r ;    }   } }