Ajax requests json data instance

JSON (JavaScript Object NotaTIon, JS Object Tag) is a lightweight data exchange format. It is based on a subset of ECMAScript (the js specification developed by w3c) that stores and represents data in a text format that is completely independent of the programming language. A clean and clear hierarchy makes JSON an ideal data exchange language. It is easy for people to read and write, and it is also easy to parse and generate by machine, and effectively improve network transmission efficiency.

Ajax development is very different from traditional B/S development. These differences introduce new programming problems, the biggest problem being ease of use. Because Ajax relies on browser-based JavaScript and XML, browser compatibility and supported standards have become as important as JavaScript's runtime performance. Much of these problems come from a combination of browsers, servers, and technologies, so you must understand how best to use them.

Ajax requests json data instance

Today there is such a demand, click on six continents, there are some corresponding request information, shown below, after requesting the request, the second click does not need to request.

As shown in the figure: Click on some data that appears below North America.

Ajax requests json data instance

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"

"div class="name conmap02" data-name=“nanmeizhou”

"a href="javascript:void(0)""South America"/a

"div class="condetail""/div"

"/div"

"div class="name conmap03" data-name=“ouzhou”

"a href="javascript:void(0)""European "/a"

"div class="condetail""/div"

"/div"

"div class="name conmap04" data-name="feizhou"

"a href="javascript:void(0)""Africa "/a"

"div class="condetail""/div"

"/div"

"div class="name conmap05" data-name=“yazhou”

"a href="javascript:void(0)""Asia"/a"

"div class="condetail""/div"

"/div"

"div class="name conmap06" data-name="dayangzhou"

"a href="javascript:void(0)""Oceania"/a

"div class="condetail""/div"

"/div"

"/div"

Css style:

.conSixmap{posiTIon:relaTIve;width:678px;height:335px;margin:0 auto;background:url(../images/tuanduimapBg.png) no-repeat;color:#000;font-family: "Microsoft Yahei ”}

.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:213px;}

.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": [

"Requested json data 1",

"Requested json data 2"

],

"nanmeizhou": [

"Requested json data 3",

"Requested json data 4"

],

"ouzhou": [

"Requested json data 5",

"Requested json data 6",

"Requested json data 7",

"Requested json data 8"

],

"feizhou": [

"Requested json data 9",

"Requested json data 10",

"Requested json data 11",

"Requested json data 12"

],

"yazhou": [

"Requested json data 13",

"Requested json data 14"

],

"dayangzhou": [

"Requested json data 15",

"Requested json data 16"

]

}

Js code:

$(document).ready(function(){

//Add a map

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');

/ / No request is required after the current request

If(stauteArr[_name] =='false'){

Return;

}

$.ajax({

Url: "js/schoolMap.json",

Type: 'get',

Data:{},

dataType: "json",

Success: function(data){

For(var i in data){

If(_name==i){

Console.log(data[i]);

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, please check the network');

}

});

});

});

400W PTC Fan Heater

400W Ptc Room Heater,Ptc Fan Heater,Ptc Tower Heater,Ptc Electric Fan Heater

Foshan Shunde Josintech Electrical Appliance Technology Co.,Ltd , https://www.josintech.com

Posted on