ajax请求json数据案例详解

2019-09-14 07:05:29丽君

json格式:

{
  "beimeizhou": [
    "请求的json数据1",
    "请求的json数据2"
  ],
  "nanmeizhou": [
    "请求的json数据3",
    "请求的json数据4"
  ],
  "ouzhou": [
    "请求的json数据5",
    "请求的json数据6",
    "请求的json数据7",
    "请求的json数据8"
  ],
  "feizhou": [
    "请求的json数据9",
    "请求的json数据10",
    "请求的json数据11",
    "请求的json数据12"
  ],
  "yazhou": [
    "请求的json数据13",
    "请求的json数据14"
  ],
  "dayangzhou": [
    "请求的json数据15",
    "请求的json数据16"
  ]
}

js代码:

$(document).ready(function(){
  //添加地图
  var stauteArr={
      'beimeizhou':'true',
      'nanmeizhou':'true',
      'ouzhou':'true',
      'feizhou':'true',
      'yazhou':'true',
      'dayangzhou':'true'
    };
  $(".conSixmap .name").on('click',function(){
    var _this=this;
    var htmlcon="";
    $(this).siblings(".name").children(".condetail").fadeOut(500);
    $(this).children(".condetail").fadeIn(500);
    var _name=$(this).attr('data-name');
     $.ajax({
      url:"js/schoolMap.json",
      type:'get',
      data:{},
      dataType:"json",
      success: function(data){
        for(var i in data){
          if(_name==i && stauteArr[i]=='true'){
            for(var j=0;j<data[i].length;j++){
               htmlcon+="<span>"+data[i][j]+"</span>";
            }
            $(_this).children(".condetail").append(htmlcon);
            stauteArr[i]='false';
          }
        }
      },
      error: function(){
        alert('请求失败,请检查网络');
      }
    });
  });
});