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. console输出选择器的问题

    html代码: <input type="text" class="loginInput loginPwText gray" value="密码 ...

  2. php中的各种http报错的报错的状态码的分析

    HTTP常见错误 HTTP 错误 400 400 请求出错 由于语法格式有误,服务器无法理解此请求.不作修改,客户程序就无法重复此请求. HTTP 错误 401 401.1 未授权:登录失败 此错误表 ...

  3. Epic Games工程师分享：如何在移动平台上做UE4的UI优化？

    转自:https://blog.csdn.net/debugconsole/article/details/79281290 随着技术的不断升级,高性能的引擎逐渐受到越来越多研发商的青睐,UE4就是其 ...

  4. Kafka参数详解

    一.相关参数配置 System 系统参数 #唯一标识在集群中的ID,要求是正数. broker.id=0 #服务端口,默认9092 port=9092 #监听地址,不设为所有地址 host.name= ...

  5. Maven Project pom.xml属性解析

    pom.xml文件: groupId 定义了项目属于哪个组,根据自己的情况命名,比如谷歌公司的angular项目,就取名为 com.google.angular artifactId  定义了当前Ma ...

  6. async方法:async+await

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  7. Web api Json 接受的参数类型为父类，自动序列化为子类的过程

    场景: public abstract class JsonCreationConverter<T> : JsonConverter { /// <summary> /// t ...

  8. Unable to find the wrapper ”https” - did youforget to enable it when you configured PHP?

    Unable to find the wrapper ”https” - did youforget to enable it when you configured PHP? 这是在Windows的 ...

  9. 设置IIS7/IIS7.5的FTP支持断点续传

    Windows Server 2003的IIS自带FTP默认支持断点续传,但是Windows Server 2008/R2默认已经不支持,因此需要注意设置,才能让其支持断点续传,更好的利用宝贵的服务器 ...

  10. fastclick.js解决移动端（ipad）点击事件反应慢问题

    参考http://blog.csdn.net/xjun0812/article/details/64919063 http://www.jianshu.com/p/16d3e4f9b2a9 问题的发现 ...