ajax请求json数据案例详解

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

超文本标记语言代码结构：

div class=' Consixmap ' div class=' name con map 01 ' data-name=' Bei mezhou ' a href=' JavaScript : void(0)'北美洲/a div class=' Conde tail '/div/div class=' name con map02 ' data-name=' nanmezhou ' a href=' JavaScript : void(0 ')南美洲/a div class=' Conde tail '/div/div class=' name con map03 ' data-name=' ouzhou ' a href=' JavaScript : void(0)'欧洲/a分区class=' Conde tail '/div/div class=' name con map04 ' data-name=' Fei Zhou ' a href=' JavaScript : void(0)'非洲/a div class=' Conde tail '/div/div class=' name con map05 ' data-name=' yazhou ' a href=' JavaScript : void(0 ')亚洲/a div class=' Conde tail '/div/div class=' name con map06 ' data-name=' day扬州' a href=' JavaScript : void(0 ')大洋洲/a div class=' Conde tail '/div/div/div CSS样式：conSixmap {位置：相对；宽度宽度：678像素重量：335像素33600汽车背景：url(./images/tuandimabg。巴布亚新几内亚)不重复；color: # 000字体系列： '微软雅黑'}.conSixmap .名字condetail { display:none位置：绝对；z索引：10;宽度宽度：216pxpadding:10px左侧：50%;边距-左侧：-118 px；top:54px背景：url(./images/opci 83。巴布亚新几内亚)重复；边界半径：5像素；}.conSixmap .Conde尾跨{显示：块；color : # ffffont-size :14 px；向左文本对齐：}.conSixmap .名称{位置：绝对宽度：52 px高度：55px}。conSixmap .命名一个{ display:blockz索引：2;位置：绝对；填充-top :35 px；文本对齐：居中；光标：指针指针；宽度：52 px高度：20 pxcolor : # 000 font-size :12 px；}.conSixmap。con map 01 {左侧：91 pxtop:73px}。conSixmap。con map 01 a {背景： URL(./images/beimepicbg。巴布亚新几内亚)不重复顶部中心；}.conSixmap。con map 02 {左侧：180 pxtop:213px}。conSixmap。con map 02 a {背景： URL(./images/nanmeimabg。巴布亚新几内亚)不重复顶部中心；}.conSixmap。con map 03 {左侧：339 pxtop:68px}。conSixmap。con map 03 a {背景： URL(./images/ouzhaomapbg。巴布亚新几内亚)不重复顶部中心；}.conSixmap。con map 04 {左侧：327 pxtop:158px}。conSixmap。con map 04 a {背景： URL(./images/feizhoumapbg.png)不重复顶部中心；}.conSixmap。con map 05 {左侧：480 pxtop:75px}。conSixmap。con map 05 a {背景： URL(./images/yazhoumapBg.png)不重复顶部中心；}.conSixmap。con map 06 {左侧：545 pxtop:220px}。conSixmap。con map 06 a {背景： URL(./images/dayyangbg。巴布亚新几内亚)不重复顶部中心；}json格式：

{ '北梅州' : ['请求的json数据1', '请求的json数据2' ],'南湄洲' : ['请求的json数据3', '请求的json数据4' ],'瓯州' : ['请求的json数据5', '请求的json数据6', '请求的json数据7', '请求的json数据8' ],'飞洲' : ['请求的json数据9', '请求的json数据10', '请求的json数据11', '请求的json数据12' ],'崖州' : ['请求的json数据13', '请求的json数据14' ],'大洋洲' : ['请求的json数据15', '请求的json数据16' ]}js代码：

$(文档)。就绪（函数(){ //添加地图var stauteArr={ '北美州' : '真','南美州' : '真','瓯州' : '真','肥州' : '真','崖州' : '真','大阳州' : '真' };$('.conSixmap .名称')。on('click '，function(){ var _ this=this；var htmlcon=$(这个)。兄弟姐妹('。名称')。孩子们“‘Conde tail’).淡出(500)；$(这个)。孩子们“‘Conde tail’).法丁(500);var _name=$(this).attr('数据名称');$.Ajax({ URL : ' js/comolp。JSON '，type:'get '，data:{}，dataType:'json '，success :函数(data){ for(var I in data){ if(_ name==I stautharr[I]=' true ')}){ for(var j=0；jdata[i].长度；j){ html con=' span ' data[I][j]'/span '；} $(_this).孩子们“‘Conde tail’).追加(html con)；stautar er[I]=' false '；} } }，error: function(){ alert('请求失败，请检查网络');} });});});