ajax json城市联动

前端开发中，经常需要实现城市联动功能。其中，使用Ajax加载JSON数据是一种有效且便捷的方法。以下是一个基于Ajax JSON的城市联动示例：

$(function(){
  var cities = null; //定义json数据对象

  //请求json数据
  $.ajax({
    url: "/data/cities.json",type: "GET",dataType: "json",success: function(data){
      cities = data;
      fillProvince(); //加载省列表
    }
  });

  //加载省份列表
  function fillProvince(){
    var options = "请选择省份"; //省份列表
    $.each(cities,function(key,value){
      options += "" + key + "";
    });
    $("#province").html(options);
    $("#city").html("请选择城市"); //默认城市列表
  }

  //选择省份后，加载对应城市列表
  $("#province").on("change",function(){
    var province = $(this).val();
    if(province != ""){
      var options = "请选择城市"; //城市列表
      $.each(cities[province],function(index,value){
        options += "" + value + "";
      });
      $("#city").html(options);
    }else{
      $("#city").html("请选择城市"); //默认城市列表
    }
  });
})

以上代码主要包含以下几个部分：

1. 请求JSON数据：使用jQuery的$.ajax方法请求服务器端的JSON数据。

2. 填充省份列表：根据JSON数据中的省份信息，生成对应的option选项并添加到省份select元素中。

3. 填充城市列表：根据选择的省份信息，生成对应的城市option选项并添加到城市select元素中。

通过以上代码，可以快速实现基于Ajax JSON的城市联动功能，提升用户体验，增加客户端交互。