ajax实现城市三级联动

html

同以往的城市三级联动原生js代码一样

<select name="sheng" id="sheng">
        <option value="-1">请选择</option>
 </select>
  <select name="shi" id="shi">
      <option value="-1">请选择</option>
  </select>
  <select name="qu" id="qu">
      <option value="-1">请选择</option>
  </select>

json数据格式

js

//封装请求数据的方法
 function ajaxJson(method, url, callback) {
 //第一步 创建xhr对象
     var xhr = null;
     //兼容性处理
     if (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest()
     } else {
         xhr = new ActiveXObject('Microsoft.XMLHTTP')
     }
     //第二步绑定监听事件
     xhr.onreadystatechange = function() {
     // 当xhr.readyState == 4 说明已经完全接受响应的数据
     // xhr.status为响应HTTP的状态
         if (xhr.readyState == 4) {
             if (xhr.status == 200) {
             //将xhr.responseText响应返回的数据装换为对象的形式，传入function中
                 callback(JSON.parse(xhr.responseText));
             }
         }
     }
     //第三步建立连接 
      //第一个参数为请求的方法
      //第二个参数为请求的数据链接
      //第三个参数为boolean类型 true为默认异步进行  false 为同步进行
     xhr.open(method, url, true)
     //第四步 发送请求
     xhr.send(null)
 }
 
 //首先一开始就需要请求所有的省的数据，并且添加到省级的下拉框中
 ajaxJson('POST', 'city.json', function(res) {
     for (var key in res) {
         var option = document.createElement('option')
         option.value = key;
         option.innerText = res[key].name;
         document.getElementById('sheng').appendChild(option)
     }
 })
 
//省
document.getElementById('sheng').onchange = function() {
//当省级的下拉框中的内容发生改变时，还未失焦前，全局变量shengval
  shengval = this.value
  ajax读取json文件的数据，请求方式为post方法
   ajaxJson('POST', 'city.json', function(res) {
       //获取所选择的省份的市区 city 数组
       var data = res[shengval].city;
       //初始化市区的下拉框内容
       document.getElementById('shi').innerHTML = '<option value="-1">请选择</option>'
       document.getElementById('qu').innerHTML = '<option value="-1">请选择</option>'
       // 将读取的city数组中的name数据添加到市的select中
       for (var key in data) {
           var option = document.createElement('option')
           option.value = key;
           option.innerText = data[key].name;
           document.getElementById('shi').appendChild(option)
       }
   })
}

//市 （同上）
 document.getElementById('shi').onchange = function() {
     shival = this.value
     ajaxJson('POST', 'city.json', function(res) {
         var data = res[shengval].city[shival].area;
         console.log(data)
         document.getElementById('qu').innerHTML = '<option value="-1">请选择</option>'
         for (var key in data) {
             var option = document.createElement('option')
             option.value = key;
             option.innerText = data[key];
             document.getElementById('qu').appendChild(option)
         }
     })
 }
//区
 document.getElementById('qu').onchange = function() {
 //当区中的内容发生改变时，清空省市里面的下拉选项
     shival = null
     shengval = null
 }
 

php

<?php


    $data = [];
    echo $data;


?>