电子发烧友App
JSON（JavaScript Object Notation， JS 对象标记） 是一种轻量级的数据交换格式。它基于 ECMAScript （w3c制定的js规范）的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
Ajax 开发与传统的 B/S开发有很大的不同。这些不同引入了新的编程问题，最大的问题在于易用性。由于 Ajax 依赖浏览器的 JavaScript 和XML，浏览器的兼容性和支持的标准也变得和 JavaScript 的运行时性能一样重要了。这些问题中的大部分来源于浏览器、服务器和技术的组合，因此必须理解如何才能最好的使用这些技术。
ajax请求json数据实例
今天有这样一个需求，点击六个大洲，出现对应的一些请求信息，展示在下面，请求请求过后，第二次点击就无需请求。
如图所示：点击北美洲下面出现请求的一些数据
html代码结构：
《div class=“conSixmap”》
《div class=“name conmap01” data-name=“beimeizhou”》
《a href=“javascript:void（0）”》北美洲《/a》
《div class=“condetail”》《/div》
《/div》
《div class=“name conmap02” data-name=“nanmeizhou”》
《a href=“javascript:void（0）”》南美洲《/a》
《div class=“condetail”》《/div》
《/div》
《div class=“name conmap03” data-name=“ouzhou”》
《a href=“javascript:void（0）”》欧洲《/a》
《div class=“condetail”》《/div》
《/div》
《div class=“name conmap04” data-name=“feizhou”》
《a href=“javascript:void（0）”》非洲《/a》
《div class=“condetail”》《/div》
《/div》
《div class=“name conmap05” data-name=“yazhou”》
《a href=“javascript:void（0）”》亚洲《/a》
《div class=“condetail”》《/div》
《/div》
《div class=“name conmap06” data-name=“dayangzhou”》
《a href=“javascript:void（0）”》大洋洲《/a》
《div class=“condetail”》《/div》
《/div》
《/div》
css样式：
.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: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格式：
{
“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代码：
//添加地图
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’）;
//当前请求过后不需要请求
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（‘请求失败，请检查网络’）;
}
}）;
}）;
}）;
工商网监
评论