電子發燒友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（‘請求失敗，請檢查網絡’）;
}
}）;
}）;
}）;
工商網監
評論