1.三级地址联动思路如下：

2.建立数据库。这里直接使用网上的地址数库，最后一个字段无用，先不去管它

3.建立一个server.php 文件

 <?php

     // 数据库连接

     mysql_connect("localhost","root","root") or die(mysql_error());

     mysql_select_db("ajax_demo");

     mysql_query("set names utf8");

     // 声明一个数组

     $list = array();

     // 对省级区域的请求作出反馈

     if(isset($_REQUEST['province_id'])){

         $sql = 'select * from ecs_region where parent_id='.$_REQUEST['province_id'];

         $res = mysql_query($sql);

         while($row = mysql_fetch_assoc($res)){

             array_push($list,$row);

         };

         // 把数组转化成json 格式文件

         echo json_encode($list);

     // 对城市级区域的请求作出反馈

     }else if(isset($_REQUEST['city_id'])){

         $sql = 'select * from ecs_region where parent_id='.$_REQUEST['city_id'];

         $res = mysql_query( $sql );

         while($row=mysql_fetch_assoc($res)){

             array_push($list,$row);

         }

         // 把数组转化成json 格式文件

         echo json_encode($list);

     };

 ?>

4. 建立一个请求文件：dizhi_argument.php

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <script>

      window.onload= function(){

          // 编写获取城市地址的函数：getcity();

         function getcity(Id){

             var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

             var url = 'server.php?province_id='+Id+'&tt='+ Math.random();

              xhr.open('GET',url,true);

              xhr.onreadystatechange = function(){

                  if(xhr.readyState==4 && xhr.status==200){

                      var obj = JSON.parse(xhr.responseText);

                      var city = '';

                      var Octiy = document.querySelector('#city');

                      city += "<option value='0'>请选中城市</option>";

                      for(var i in obj){

                          city +="<option value='" + obj[i].region_id + "'>" + obj[i].region_name + "</option>";

                      }

                      Octiy.innerHTML = city;

                  }

              }

              xhr.send(null);

         }

          // 编写获取区县地址的函数：getDistrict();

         function getDistrict(Id){

             var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

             var url = "server.php?city_id="+Id+"&tt="+ Math.random();

             xhr.open('GET',url,true);

             xhr.onreadystatechange = function(){

                 if(xhr.readyState==4 && xhr.status==200){

                     var obj = JSON.parse(xhr.responseText);

                     var district = '';

                     var Odistrict = document.querySelector("#district");

                     district = "<option value='0'>请选择区县</option>";

                     for(var i in obj){

                         district += "<option value='" + obj[i].region_id + "'>" + obj[i].region_name + "</option>";

                     }

                     Odistrict.innerHTML = district ;

                 }

             }

             xhr.send(null);

         }

         // 获取城市地址的元素

         var Ocity = document.querySelector('#city');

         // 对城市地址进行监控，如果改变了，则调用获取区县的函数：getDistrict()

         Ocity.onchange = function(){

             getDistrict(this.value);

         };

         // 获取省区地址元素

         var Oprovince = document.querySelector('#province');

         // 对省区地址进行监控，如果有发生改变，则调用城市的函数：getcity();

         Oprovince.onchange= function(){

             getcity(this.value);

         };

     }

     </script>

 </head>

 <body>

     <?php

     // 服务器连接，数据库选择，设置字符集编码

     mysql_connect("localhost","root","root") or die(mysql_error());

     mysql_select_db("ajax_demo");

     mysql_query("set names utf8");

     ?>

     <select name="province" id="province">

     <option value="0">请选择省区</option>

     <?php

     // 调用升级地址，遍历出来

     $sql = "select * from ecs_region where parent_id=1" ;

     $res = mysql_query($sql);

     while($row=mysql_fetch_assoc($res)){ ?>

         <option value="<?php echo $row['region_id'] ?>"><?php  echo $row['region_name']; ?></option>

     <?php

     }

     ?>

     </select>

     <!-- 城市区块 -->

     <select name="city" id="city">

         <option value="0">请选择城市</option>

     </select>

     <!-- 区县区块 -->

     <select name="district" id="district">

         <option value="0">请选择区县</option>

     </select>

 </body>

 </html>

5.通过地址栏访问：http://localhost/aaa/yuanli/test/dizhi_argument.php

运行结果：结果OK，达到了三级代用的效果

上面使用的是GET 方法传递参数，如果想使用POST方式，只需要把dizhi_argument.php中的

xhr.open('GET',url,true); 改为  xhr.open('POST',url,true);
xhr.send(null);  改为  xhr.send("province_id="+Id);
并在send()函数前加入：  xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

 
这样就可以了
 
 

javascript_ajax 地址三级联动的更多相关文章

  1. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  2. Vue如何使用vue-area-linkage实现地址三级联动效果

    很多时候我们需要使用地址三级联动,即省市区三级联动.网上有很多插件,在此介绍Vue的一款地区联动插件:vue-area-linkage,下面介绍如何使用这个插件实现地址联动效果:         1. ...

  3. 中国省市区地址三级联动插件---jQuery Distpicker

    插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...

  4. vue移动端地址三级联动组件(一)

    vue移动端地区三级联动 省,市,县.用的vue+mintUi 因为多级联动以及地区的规则比较多.正好有时间自己写了一个.有问题以及建议欢迎指出.涉及到dom移动,所以依赖vue+jquery.这边数 ...

  5. jquery_ajax 地址三级联动

    jquery 的三级地址联动,原理与javascript类似,只是在触发请求的时候,使用封装好的 $.get ,$post,$.ajax 方法去执行,其余的都是一样的,后台服务器请求文件是一样的,前台 ...

  6. 省市区地址三级联动jQuery插件Distpicker使用

    插件下载地址 http://www.jq22.com/jquery-info8054 效果如下: 使用: 1.引入js <script src="http://www.jq22.com ...

  7. vue移动端地址三级联动组件(二)

    继续上一篇: 子组件css: <style scoped lang="less"> #city { width: 100%; height: 100%; positio ...

  8. 用Vue2仿京东省市区三级联动效果

    三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 ...

  9. jquery全国省市区三级联动插件distpicker

    使用步骤: 1.引入js <script src="distpicker/jquery.min.js" type="text/javascript" ch ...

随机推荐

  1. 廖雪峰Java4反射与泛型-1反射-2访问字段Field和3调用方法Method

    2.字段Field 2.1.通过Class实例获取字段field信息: getField(name): 获取某个public的field,包括父类 getDeclaredField(name): 获取 ...

  2. div+css命名大全

    头:header  内容:content/container  尾:footer  导航:nav  侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper  左右中:lef ...

  3. Java泛型深入理解(转载)

    原文地址  http://blog.csdn.net/sunxianghuang/article/details/51982979 泛型之前 在面向对象编程语言中,多态算是一种泛化机制.例如,你可以将 ...

  4. python常用模块: random模块, time模块, sys模块, os模块, 序列化模块

    一. random模块  import random # 任意小数 print(random.random()) # 0到1的任意小数 print(random.uniform(-10, 10)) # ...

  5. [UE4]Break展开复杂数据结构

  6. laravel插入数据时报 502 Bad Gateway

    前提:model中$timestamp = true; 但数据表中created_at 和updated_at  是默认为当前时间  造成冲突. 原因:用create方法时 created_at 和u ...

  7. 00009 - cat、tail、head、tee、wc、sort文件操作和过滤

    绝大多数命令行工作是针对文件的.我们会在本节中讨论如何观察及过滤文件内容,使用一条命令从文件中提取所需信息,以及对文件的内容进行排序. cat.tail.head.tee:文件打印命令这些命令的语法基 ...

  8. Linux 文件，目录，压缩，解压缩操作

    2018/11/20 1.find -name 'pom.xml' | xargs perl -pi -e  's|oldString|newString|g' (批量替换) ( 命令行中使用Perl ...

  9. retry之python重试机制

    安装 pip install retry Retry装饰器 retry(exceptions=Exception, tries=-1, delay=0, max_delay=None, backoff ...

  10. （转）使用Flexible实现手淘H5页面的终端适配

    原文链接 曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面 ...