Detailed explanation of ajax request json data case and ajaxjson case

Detailed explanation of ajax request json data case and ajaxjson case

Today, we have such a requirement. When we click on six continents, the corresponding request information is displayed below. After the request is sent, the request is not required for the second click.
: Click the request data below North America.

Html code structure:

<Div class = "conSixmap"> <div class = "name conmap01" data-name = "beimeizhou"> <a href = "javascript: void (0) "> North America </a> <div class =" condetail "> </div> <div class =" name conmap02 "data-name =" nanmeizhou "> <a href = "javascript: void (0) "> South America </a> <div class =" condetail "> </div> <div class =" name conmap03 "data-name =" ouzhou "> <a href = "javascript: void (0) "> Europe </a> <div class =" condetail "> </div> <div class =" name conmap04 "data-name =" feizhou "> <a href = "javascript: void (0) "> Africa </a> <div class =" condetail "> </div> <div class =" name conmap05 "data-name =" yazhou "> <a href = "javascript: void (0) "> Asia </a> <div class =" condetail "> </div> <div class =" name conmap06 "data-name =" dayangzhou "> <a href = "javascript: void (0) "> Oceania </a> <div class =" condetail "> </div>

Css style:

. 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; position: absolute; z-index: 10; width: 216px; padding: 10px; left: 50%; margin-left:-118px; top: 54px; background: url (.. /images/opcity83.png) repeat; border-radius: 5px ;}. conSixmap. condetail span {display: block; color: # fff; font-size: 14px; text-align: left ;}. conSixmap. name {position: absolute; width: 52px; height: 55px ;}. conSixmap. name a {display: block; z-index: 2; position: absolute; padding-top: 35px; text-align: center; cursor: pointer; width: 52px; height: 20px; color: #000; font-size: 12px ;}. conSixmap. conmap01 {left: 91px; top: 73px ;}. conSixmap. conmap01 a {background: url (.. /images/beimeipicBg.png) no-repeat top center ;}. conSixmap. conmap02 {left: 180px; top: pixel PX ;}. conSixmap. conmap02 a {background: url (.. /images/nanmeimapbg.png) no-repeat top center ;}. conSixmap. conmap03 {left: 339px; top: 68px ;}. conSixmap. conmap03 a {background: url (.. /images/ouzhoumapBg.png) no-repeat top center ;}. conSixmap. conmap04 {left: 327px; top: 158px ;}. conSixmap. conmap04 a {background: url (.. /images/feizhoumapbg.png) no-repeat top center ;}. conSixmap. conmap05 {left: 480px; top: 75px ;}. conSixmap. conmap05 a {background: url (.. /images/yazhoumapBg.png) no-repeat top center ;}. conSixmap. conmap06 {left: 545px; top: 220px ;}. conSixmap. conmap06 a {background: url (.. /images/dayangmapbg.png) no-repeat top center ;}

Json format:

{"Beimeizhou": ["request json data 1", "request json data 2"], "nanmeizhou": ["request json data 3 ", "json data 4"], "ouzhou": ["json data 5", "json data 6", "json data 7 ", "requested json data 8"], "feizhou": ["requested json data 9", "requested json data 10", "requested json Data 11 ", "json data 12"], "yazhou": ["json data 13", "json data 14"], "dayangzhou ": ["requested json data 15", "requested json data 16"]}

Js Code:

$ (Document ). ready (function () {// Add map var stauteArr = {'beimeizhou ': 'true', 'nanmeizhou': 'true', 'ouzhou ': 'true ', 'feizhou': 'true', 'azhou ': 'true', 'dayangzhou': 'true'}; $ (". conSixmap. name "). on ('click', function () {var _ this = this; var htmlcon = ""; $ (this ). siblings (". name "). children (". condetail "). fadeouts (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 ('request failed, check the network ');}});});});