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