電子發(fā)燒友App
JSON（JavaScript Object Notation， JS 對(duì)象標(biāo)記） 是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于 ECMAScript （w3c制定的js規(guī)范）的一個(gè)子集，采用完全獨(dú)立于編程語言的文本格式來存儲(chǔ)和表示數(shù)據(jù)。簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使得 JSON 成為理想的數(shù)據(jù)交換語言。 易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，并有效地提升網(wǎng)絡(luò)傳輸效率。
Ajax 開發(fā)與傳統(tǒng)的 B/S開發(fā)有很大的不同。這些不同引入了新的編程問題，最大的問題在于易用性。由于 Ajax 依賴瀏覽器的 JavaScript 和XML，瀏覽器的兼容性和支持的標(biāo)準(zhǔn)也變得和 JavaScript 的運(yùn)行時(shí)性能一樣重要了。這些問題中的大部分來源于瀏覽器、服務(wù)器和技術(shù)的組合，因此必須理解如何才能最好的使用這些技術(shù)。
ajax請(qǐng)求json數(shù)據(jù)實(shí)例
今天有這樣一個(gè)需求，點(diǎn)擊六個(gè)大洲，出現(xiàn)對(duì)應(yīng)的一些請(qǐng)求信息，展示在下面，請(qǐng)求請(qǐng)求過后，第二次點(diǎn)擊就無需請(qǐng)求。
如圖所示：點(diǎn)擊北美洲下面出現(xiàn)請(qǐng)求的一些數(shù)據(jù)
html代碼結(jié)構(gòu)：
《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”： ［
“請(qǐng)求的json數(shù)據(jù)1”，
“請(qǐng)求的json數(shù)據(jù)2”
?。荩?/p>
“nanmeizhou”： ［
“請(qǐng)求的json數(shù)據(jù)3”，
“請(qǐng)求的json數(shù)據(jù)4”
?。荩?/p>
“ouzhou”： ［
“請(qǐng)求的json數(shù)據(jù)5”，
“請(qǐng)求的json數(shù)據(jù)6”，
“請(qǐng)求的json數(shù)據(jù)7”，
“請(qǐng)求的json數(shù)據(jù)8”
?。荩?/p>
“feizhou”： ［
“請(qǐng)求的json數(shù)據(jù)9”，
“請(qǐng)求的json數(shù)據(jù)10”，
“請(qǐng)求的json數(shù)據(jù)11”，
“請(qǐng)求的json數(shù)據(jù)12”
?。?，
“yazhou”： ［
“請(qǐng)求的json數(shù)據(jù)13”，
“請(qǐng)求的json數(shù)據(jù)14”
?。?，
“dayangzhou”： ［
“請(qǐng)求的json數(shù)據(jù)15”，
“請(qǐng)求的json數(shù)據(jù)16”
?。?/p>
}
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’）;
//當(dāng)前請(qǐng)求過后不需要請(qǐng)求
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（‘請(qǐng)求失敗，請(qǐng)檢查網(wǎng)絡(luò)’）;
}
}）;
}）;
}）;
工商網(wǎng)監(jiān)
評(píng)論