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. checked和stop()的讲解

    input:cheacked (属性选择器): checked 选中复选框 $("p").stop(ture); 代码的翻译:(参数)布尔值  p身上所有的动画都停止了 加不加tr ...

  2. Shiro ini配置

    Shiro.ini配置: ini配置文件类似Java中的properties(key = value),不过提供了key/value分类的特性,每个部分的key不重复即可 在eclipse中设置打开方 ...

  3. WebBrowser常用属性方法介绍

    WebBrowser 常用属性方法 ■■方法 ==============================  ▲GoBack    相当于IE的"后退"按钮,使你在当前历史列表中后 ...

  4. puppeteer 的PDD反爬经历

    使用puppeteer 爬取PDD数据时出现要求登录,以前是没有这问题的. 尝试多种方式如果: 变更UA 变更代理IP 变更Chromium版本(当然最终就是该问题的原因,但是因为版本跨度太大没有测试 ...

  5. JVM总结-反射

    反射是 Java 语言中一个相当重要的特性,它允许正在运行的 Java 程序观测,甚至是修改程序的动态行为. 举例来说,我们可以通过 Class 对象枚举该类中的所有方法,我们还可以通过 Method ...

  6. webkitAnimationEnd动画事件

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

  7. Failed to execute request because the App-Domain could not be created. Error: 0x80070002 系统找不到指定的文件。

    360更新补丁后,网站就打不开aspx文件了,后来一查是framework2.0的KB2844285这个补丁引起的.把它卸载掉就ok了!          

  8. CPU Usage Sampling Profiles (cpu=samples)

    HPROF工具通过对采样线程搜集CPU使用信息.以下是从运行的javac中样例输出的一部分. $ javac -J-agentlib:hprof=cpu=samples Hello.java CPU ...

  9. openStack queens

  10. 为啥我做的RFM模型被人说做错了，我错哪了？

    本文转自知乎 作者:接地气的陈老师 ————————————————————————————————————————————————————— 有同学问:“为啥我做的RFM模型被客户/业务部门批斗,说 ...