jquery异步加载json格式的数据

1.直接使用$.getJSON()方法是加载不了与静态界面同级别的本地的json后缀的文件。

2.解决办法：将json后缀的文件改为js后缀，这样就相当于加载了一个js文件。

解决办法：用$.getScript()方法加载后是以字符串的形式进行展示，所以需要eval()方法来将其转换成js对象。然后用了两个each方法进行遍历json数据。第二个遍历的数据是在第一个each数据的基础上进行的。

    $.getScript("data_citys.js", function (data) {
                data = eval(customhouse);
                $.each(data.childCustomHouse, function (i, Province) {
                    $(".cityChoice dl").append("<dt><a>" + Province.province + "</a></dt>")
                    var child="<dd>"
                    $.each(Province.children, function (i, City) {
                        child +="<a>"+ City.city+"</a>";
                    })
                    child + "</dd>";
                    $(".cityChoice dl").append(child);
                })
                $(".cityChoice div span").eq(0).html(data.name).css("font-weight","bolder");
            });

var customhouse = {
    "name": "海关总署", "childCustomHouse": [

        {
            "province": "北京市", "children": [
                {
                    "city": "北京市海关总署", "x": "12957140.380859", "y": "4854144.165039"
                   }]
        },
        {
            "province": "天津市", "children": [
                {
                    "city": "天津市海关总署", "x": "12957140.380859", "y": "4854144.165039"
                }]
        },
        {
            "province": "江苏", "children": [
                {
                    "city": "南京市海关总署", "x": "13055615.060171", "y": "3745556.395213"
                },
                {
                    "city": "镇江市海关总署", "x": "13055615.060171", "y": "3745556.395213"
                },
                {
                    "city": "绵阳市海关总署", "x": "13055615.060171", "y": "3745556.395213"
                }
            ]
        },
        {
            "province": "安徽", "children": [
             { "city": "合肥市海关总署", "x": "13055615.060171", "y": "3745556.395213" },
             { "city": "芜湖市海关总署", "x": "13183825.746076", "y": "3678993.560791" },
             { "city": "蚌埠市海关总署", "x": "13066652.737935", "y": "3886469.977061" },
             { "city": "淮南市海关总署", "x": "13026305.769898", "y": "3848394.533793" }
            ]
        },
        {
            "province": "福建", "children": [
            {
                "city": "福州市海关总署", "x": "13282472.555124", "y": "3003024.419825"
            },
            {
                "city": "厦门市海关总署", "x": "13151164.550781", "y": "2812705.973307"
            },
            {
                "city": "莆田市海关总署", "x": "13251984.653919", "y": "2929572.716987"
            },
            {
                "city": "三明市海关总署", "x": "13094264.471760", "y": "3031771.614174"
            },
            {
                "city": "泉州市海关总署", "x": "13200734.863281", "y": "2864382.832845"
            },
            {
                "city": "漳州市海关总署", "x": "13099124.569548", "y": "2816127.438863"
            }
            ]
        },

        {
            "province": "广东", "children": [
                {
                    "city": "广州市海关总署", "x": "12608484.375000", "y": "2647840.698242"
                },
                {
                    "city": "韶关市海关总署", "x": "12646207.153320", "y": "2846280.680339"
                },
                {
                    "city": "深圳市海关总署", "x": "12694429.199219", "y": "2580002.807617"
                },
                {
                    "city": "珠海市海关总署", "x": "12640819.107056", "y": "2541664.703369"
                },
                {
                    "city": "汕头市海关总署", "x": "12993460.866292", "y": "2677990.234375"
                },
                {
                    "city": "佛山市海关总署", "x": "12593796.875000", "y": "2630399.291992"
                },
                {
                    "city": "江门市海关总署", "x": "12587870.239258", "y": "2582043.375651"
                },
                {
                    "city": "东莞市海关总署", "x": "12664480.468750", "y": "2634828.491211"
                },
                {
                    "city": "中山市海关总署", "x": "12620242.502848", "y": "2574047.007243"
                },
                {
                    "city": "潮州市海关总署", "x": "12983319.702148", "y": "2711945.037842"
                }
            ]
        }
    ]
}

  <div class="city">
                    <button>南京市</button><span></span>
                    <div class="cityChoice hide">
                        <a class="close"><span aria-hidden="true">×</span></a>
                        <div><span></span>&emsp;&emsp;当前城市:<span>信阳市</span> &nbsp;<a>设为默认城市</a></div>
                        <hr />
                        <dl></dl>
                    </div>
                </div>


.city {
position:absolute;left:10px;top:20px;}
    .city button {
    background-color:#fff;border:1px solid #eee;
    padding:0 22px;height:40px;
    }
        .city > span {
        background:url(../images/search.png) -152px 30px;display: inline-block;
  width: 20px;
  height: 20px;
  /* margin-left: 30px; */
  position: relative;
  /* position: absolute; */
  left: -20px;
  top: 7px;
        }
    .city .cityChoice{
        width:300px;max-height:370px;overflow-y:auto;
        background-color:#fff;
        border:2px solid #ddd;  padding: 10px;
  box-sizing: border-box;  
  position: absolute;
  left: 1px;
  font-size:12px;
    }
    .cityChoice  >div a{color:#137fab; cursor:pointer;}
    .close {
    position: absolute;
    top: 5px;
    right: 15px;
    border: none;
    background: none;
    font-size: 16px;
    font-weight:bold;
    color: #999;
    display: block;
    cursor: pointer;
}
    .cityChoice  >div{text-align:left;margin:5px;margin-top:12px;}  
     .city div dt, .city div dd{text-align:left; cursor:pointer;}
      .city div dt a {
        float:left;display:inline-block;font-weight:bold; padding:3px;}
       .city div dd{margin-left:60px;}
       .city div dd a{
        padding:3px 7px;display:inline-block;}
       .city div dd a:hover{color:#1b5fac;}