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. 百度地图api公交路线，IE下跳转百度地图后中文变成乱码的解决办法

    百度开放的公交路线的链接,IE跳转会出现中文变成乱码的问题.如图: //创建InfoWindow function createInfoWindow() { var desDiv = []; desD ...

  2. jQuery的杂项

    <script  src="引入插件"></script> 位置应写在head中,在http协议中,当你浏览网页时,会先加载head里面的东西  刷新页面时 ...

  3. Jmeter（二十）Beanshell or JSR223

    有关Beanshell和JSR223组件的部分,早就想写一大篇幅随笔进行记录,苦于不知如何去描述这两部分的内容,一直在修改随笔. 介绍一下Beanshell: Beanshell是轻量级Java,支持 ...

  4. Css学习(2)

    1 标签分类(显示方式) 块元素 典型代表,Div,h1-h6,p,ul,li 特点: ★独占一行 ★可以设置宽高 ★ 嵌套(包含)下,子块元素宽度(没有定义情况下)和父块元素宽度默认一致. 行内元素 ...

  5. Linux使用NFS服务实现远程共享

    首先安装 apt install -y nfs-kernel-server nfs-common 编辑配置文件 vim /etc/exports 添加内容: /root/test *(rw,sync, ...

  6. JavaEE进阶——全文检索之Solr7.4服务器

    I. Solr Solr简介 Solr是Apache的顶级开源项目,使用java开发 ,基于Lucene的全文检索服务器. Solr比Lucene提供了更多的查询语句,而且它可扩展.可配置,同时它对L ...

  7. python requests 发起http POST 请求

    python requests 发起http POST 请求,带参数,带请求头: #!/usr/bin/env python # -*- coding: utf-8 -*- import reques ...

  8. isNAN的使用方法及介绍

    NaN为 Not a Number isNaN()函数在接到一个值后,会尝试将这个值转换为数值. alert(isNaN(NaN)); //true alert(isNaN(25)); //false ...

  9. android 开发 实现一个带图片Image的ListView

    注意:这种实现方法不是实现ListView的最优方法,只是希望通过练习了解ListView的实现原理 思维路线: 1.创建drawable文件夹将要使用的图片导入进去 2.写一个类,用于存放图片ID数 ...

  10. [UnityShader基础]02.深度测试 & 深度写入

    参考链接: https://blog.csdn.net/v_xchen_v/article/details/79380222 前面说到了渲染队列,对于两个不透明的物体A和B,它们处于同一个渲染队列中. ...