jquery和ajax实现三级地址

作业要求：

实现三级地址（省份、城市和区的数据罗列两三个即可）。

1. 要求省份城市的信息必须以 json 文件格式存储。
2. 利用 ajax 技术获取到省份信息。
3. 动态渲染数据到网页上。
   提示：将数据从取出后全部存储在对象中，根据选择的省份渲染包含的城市，再根据城市渲染出包含的区，
   从而达到动态渲染数据.

创建三个下拉框

 <!--1.创建三个下拉框-->
<div id="box">
    <span>省</span>
    <select name="province" id="province" >
        <option value="-1">请选择</option>
    </select>

    <span>市</span>
    <select name="city" id="city">
        <option value="-1">请选择</option>
    </select>

    <span>区</span>
    <select name="town" id="town">
        <option value="-1">请选择</option>
    </select>
</div>

创建一个包含三个下拉菜单的HTML结构，并给它们分别设置一个唯一的id和name属性。

将省的数据填充到省的下拉菜单中，可以通过遍历省数据，动态创建option元素并添加到省的下拉菜单中。

导入数据

 <!--2.导入数据-->
  <script src="./jquery.js"></script>

编写运行的程序

 <!--3.编写运行的程序-->
  <script>
        
      $(document).ready(function(){
          getProvince();
      });
  
      $("#province").change(function(){
          getCity();
      });
      $("#city").change(function(){
          getTown();
      });   
  

在页面加载完成后，通过$(document).ready()函数来执行初始化操作，调用getProvince()函数来获取省份数据并填充到省的下拉菜单中。

使用事件监听器$(“#province”).change()来监听省下拉菜单的变化，当省的值发生改变时，调用getCity()函数来获取对应的城市数据并填充到城市的下拉菜单中。

同样地，使用事件监听器$(“#city”).change()来监听城市下拉菜单的变化，当城市的值发生改变时，调用getTown()函数来获取对应的区县数据并填充到区的下拉菜单中。

编写函数

 function getProvince(){
        
          $.ajax({
              type:"get",
              url:'./text.json',
              data:{},
              success:function(text){
                  for(let i in text.provinces){
                    //  let newOption=$("<option>"+text.province[i].province+"</option>");
                    let newOption=$("<option value = '"+i+"'>"+text.provinces[i].province+"</option>");
                      $("#province").append(newOption);
                  }
              },
              error:function(err){
                  alert(err);
              }
          });
      }

使用$.ajax()函数发起一个GET请求，请求的URL是"./text.json"，可以根据实际情况修改。

在成功回调函数success中，通过参数text获取到返回的数据。

使用for…in循环遍历text.provinces，text.provinces是一个包含省份信息的对象。

在循环中，创建一个新的option元素，并将省份的名称作为选项的文本内容。

为option元素设置一个value属性，该属性的值可以是省份的索引或者其他唯一标识，用于后续获取对应的城市数据。

将创建好的option元素添加到省的下拉菜单中，使用$(“#province”).append(newOption).

在错误回调函数error中，可以进行错误处理，比如弹出错误信息。

而getCity与getTown类似

  function getCity(){
          let index=$("#province").val();
           //这里会出现一个bug就是如果市不重新选择，那么区是不会出现的，empty直接把请选择也去掉，即没有发生change，但我不知道怎么修改
            $("#city").empty();
        
            $("#town").empty();
        
          
          $.ajax({
              type:"get",
              url:"./text.json",
              data:{},
              success:function(text){
                  for(let i in text.provinces[index].cities){
                      $("#city").append($("<option value = '"+i+"'>"+text.provinces[index].cities[i].city+"</option>"));
                  }
              },
              error:function(err){
                alert(eer);
              }
          });
      }
  

function getTown(){
      let indexProvince=$("#province").val();
      let indexCity=$("#city").val();

      $("#town").empty();

          $.ajax({
              type:"get",
              url:"./text.json",
              data:{},
              success:function(text){
                  for(let i in text.provinces[indexProvince].cities[indexCity].towns){
                      $("#town").append($("<option value = '"+i+"'>"+text.provinces[indexProvince].cities[indexCity].towns[i]+"</option>"));
                  }
              },
              error:function(err){
                alert(eer);
              }
          });
      }
   
  </script>

运行结果

编写时发现的一些问题

1

一开始以为是错误的，后来经过大量时间研究发现原来这就是Live Severe
live reload enabled的意思是启用了实时重新加载功能。这意味着当你在编辑代码时，网页会自动重新加载，以便你可以立即看到你所做的更改。这对于开发人员来说非常方便，因为他们可以更快地测试和调试他们的代码。

2

这是因为浏览器中有安装其他插件
解决方法：把插件关闭即可

3.一个bug无法解决

这里会出现一个bug就是如果市不重新选择，那么区是不会出现的，empty直接把请选择也去掉，即没有发生change，但我不知道怎么修改empty函数？？？

额外知识

Ajax
异步无刷新技术