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. 得到body相对定位的插件

    相对body定位的插件 function offset(ele){ //该元素到父级水平定位的距离 var le=ele.offsetLeft; //该元素到父级垂直定位的距离 var to=ele. ...

  2. es6数组的方法

    1.复习的函数 函数是由关键字function声明的,他是一个引用数据类型,是Function的实例,在调用的时候会开辟一个私有空间 2.函数的成员 arguments:null  (是实参构成的数组 ...

  3. 进程优先和ACL

    linux上进程有5种状态: 1. 运行(正在运行或在运行队列中等待) 2. 中断(休眠中, 受阻, 在等待某个条件的形成或接受到信号) 3. 不可中断(收到信号不唤醒和不可运行, 进程必须等待直到有 ...

  4. SCCM 2012 R2实战系列之二：前提工作准备

    在上一篇中,我们完成了SQL Server 2012的安装和配置.现在跟大家分享SCCM安装前的准备工作. 2.1 SCCM 2012 R2 准备工作 2.1.1 创建并分配System Manage ...

  5. 打通WordPress和微信公众号

    现在还坚持写博客的人越来越少,我的博客这几年也更新很少.写博客文章的人少了,有不少人都转战到微信公众号里去写文章了.相对于博客,微信公众号(特别是订阅号)是一个相对封闭.去中心化的平台,在移动互联网时 ...

  6. Centos下安装Docker集群管理工具Shipyard

    一. Docker Shipyard是什么 ? shipyard是一个开源的docker管理平台,其特性主要包括: 支持镜像管理.容器管理. 支持控制台命令 容器资源消耗监控 支持集群swarm,可以 ...

  7. Ren'Py视觉小说安装，玩一下吧，上班很闲的话

    ---------------------------------------------------------------------------------------------------- ...

  8. [Ahoi2013]差异(后缀自动机)

    /* 前面的那一坨是可以O1计算的 后面那个显然后缀数组单调栈比较好写??? 两个后缀的lcp长度相当于他们在后缀树上的lca的深度 那么我们就能够反向用后缀自动机构造出后缀树然后统计每个点作为lca ...

  9. es6(9)--Symbol

    //Symbol生成一个独一无二的值,生成的值不会相等 { //声明1 let a1=Symbol(); let a2=Symbol(); console.log(a1===a2);//false / ...

  10. webkitAnimationEnd动画事件

    春节终于过完了,自己春节似乎过的有点大,过完春节之后,态度一直没有调整好,总有一股过节的情绪,没有完全进入学习和工作的状态来.继续调整当中…… 这两天项目中遇到一个小需求,十分类似于支付宝蚂蚁森林给小 ...