jQuery实例之ajax请求json数据案例

前端开发作者： 2024-08-20 18:55:01

今天有这样一个需求，点击六个大洲，出现对应的一些请求信息，展示在下面，请求请求过后，第二次点击就无需请求。如图所示：点击北美洲下面出现请求的一些数据 html代码结构： css样式： json格式：

<div class="conSixmap">
    ="name conmap01" data-name="beimeizhou">
        a href="javascript:void(0)">北美洲</a="condetail"></div="name conmap02"="nanmeizhou">南美洲="name conmap03"="ouzhou">欧洲="name conmap04"="feizhou">非洲="name conmap05"="yazhou">亚洲="name conmap06"="dayangzhou">大洋洲>
>

.conSixmap{position:relative;width:678px;height:335px;margin:0 auto;background:url(../images/tuanduimapBg.png) no-repeat;color:#000;font-family:"微软雅黑"}
.conSixmap .name .condetail{display:none;absolute;z-index:10;216px;padding:10px;left:50%;margin-left:-118px;top:54px;url(../images/opcity83.png) repeat;border-radius:5px;}
.conSixmap .condetail span{block;#fff;font-size:14px;text-align:left;}
.conSixmap .name{52px;55px;}
.conSixmap .name a{2;padding-top:35px;center;cursor:pointer;20px;12px;}
.conSixmap .conmap01{91px;73px;}
.conSixmap .conmap01 a{url(../images/beimeipicBg.png) no-repeat top center;}

.conSixmap .conmap02 {180px;213px;}
.conSixmap .conmap02 a{url(../images/nanmeimapbg.png) no-repeat top center;}

.conSixmap .conmap03 {339px;68px;}
.conSixmap .conmap03 a{url(../images/ouzhoumapBg.png) no-repeat top center;}

.conSixmap .conmap04{327px;158px;}
.conSixmap .conmap04 a{url(../images/feizhoumapbg.png) no-repeat top center;}

.conSixmap .conmap05 {480px;75px;}
.conSixmap .conmap05 a{url(../images/yazhoumapBg.png) no-repeat top center;}

.conSixmap .conmap06 {545px;220px;}
.conSixmap .conmap06 a{url(../images/dayangmapbg.png) no-repeat top center;}

{
    "beimeizhou": [
        "请求的json数据1","请求的json数据2"
    ],"nanmeizhou": [
        "请求的json数据3": [
        "请求的json数据5": [
        "请求的json数据9": [
        "请求的json数据13": [
        "请求的json数据15"
    ]
}

$(document).ready(function(){
    //添加地图
    var stauteArr={
            'beimeizhou':'true''ouzhou':'true''yazhou':'true'
        };
    $(".conSixmap .name").on('click',(){
        var _this=this;
        var htmlcon="";
        $(this).siblings(".name").children(".condetail").fadeOut(500);
        $(this).children(".condetail").fadeIn(500);
        var _name=$(this).attr('data-name');
        
        当前请求过后不需要请求
        if(stauteArr[_name] =='false'){
            return;
        }
          $.ajax({
            url:"js/schoolMap.json""json"(data){
                for(var i in data){
                    if(_name==i){
                        console.log(data[i]);
                        var j=0;j<data[i].length;j++){
                             htmlcon+="<span>"+data[i][j]+"</span>";
                        }
                        $(_this).children(".condetail").append(htmlcon);
                        stauteArr[i]='false';
                    }
                }
            },error: (){
                alert('请求失败，请检查网络');
            }
        });
 
    });
});