這是我前端生涯第一次和後臺對接，其經歷真是苦不堪言，多次絕處逢生，柳暗花明，可就是遲遲見不到那條村子。當然，最後我還是完成了這次對接。下麵來聊一聊我這白痴一般的經歷。 序章 話說天下大勢，分久必合，合久必分。2016年，程式員的角色已經有了很大的分化，後端、前端、移動端、演算法各領功能變數名稱家輩出，他們都是 ...
這是我前端生涯第一次和後臺對接，其經歷真是苦不堪言，多次絕處逢生，柳暗花明，可就是遲遲見不到那條村子。當然，最後我還是完成了這次對接。下麵來聊一聊我這白痴一般的經歷。
序章
話說天下大勢，分久必合，合久必分。2016年，程式員的角色已經有了很大的分化，後端、前端、移動端、演算法各領功能變數名稱家輩出，他們都是各自領域的專家，然而要完成統一天下的大業，非一己之力所能及，需要集各家之所長，方能六國滅秦。
於是，我們就這麼組成了規劃獅項目組。
那是一個寒冷的夜晚，小女孩在外面賣火柴，後來凍死了（畫風不太對-_-#。。）
那天晚上，我對後臺樟哥說：“我這邊估計差不多了，到時候你怎麼把數據傳給我去顯示啊？”
樟哥語重心長地說：“小伙，我傳你一本驚世秘籍——
AJ心經，練完以後，方能完成數據對接。”
聽到AJ心經一詞，我內心澎湃，心想：卧槽！這什麼玩意兒！？
我虛心問道：“敢問樟哥，何為AJ心經？”
樟哥抿嘴一笑，說道：“就是
ajax+json嘛～～”
我們前後端對接的故事就這麼發生了：
第一次對接
我先是在
w3school里花15分鐘把json看完了。然後再花20分鐘把ajax也看完了。
我找樟哥說：“ok了，來吧。”然後他給了我一個地址，這個神奇的地址我當然是忘了，反正顯示的內容就是json格式。然後，我尷尬的發現我連獲取數據都還沒做到。。（我想當然的把下麵一條判斷語句去掉了）
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)所以，這天晚上，不熟悉json的我最後沒能完成第一次對接。回去得先把json的例子操作一遍。
第二次對接
第二天早上，我們進行了再一次對接，這次對接簡直是神一般的對接，不知道為什麼這次能獲取他發給我的json數據了！（不用問肯定是昨晚自己寫錯了哪個單詞-_-#）
然而，幸福並沒有降臨在我身上。我僅僅是能獲取json的文本數據，並沒有解析出來（當然，解析其實也很簡單，加個解析函數JSON.parse()就行，然而我當時還在折騰eval()。。不知道為啥行不通。。|~|）
最後，我當然還是把自己折騰到成功了。來放代碼展示：
↓這是要操作的json數據
{
"sites": [
{ "name":"dkplus" , "content":"有人要約球嗎？下午系辦籃球場，不見不散！" },
{ "name":"詹姆斯" , "content":"我想打籃球" },
{ "name":"梅西" , "content":"我想踢球" }
]
}↓這是js解析json代碼
function loadXMLDoc(){
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
// document.getElementById("text").innerHTML = xmlhttp.responseText;//測試能否獲取數據
var data = xmlhttp.responseText;
// alert(data);//測試能否獲取數據到對象
var obj = JSON.parse(data);//解析json數據
// alert(obj.sites[0].name);//測試解析是否成功
document.getElementById("h2").innerHTML = obj.sites[0].name;
document.getElementById("content").innerHTML = obj.sites[0].content;
}
}
xmlhttp.open("get","test.json",true);
xmlhttp.send();
}上面有註釋的地方都是我所踩過的坑，測試json的數據傳輸真的要一步一步來。
先判斷是否接收了所有的數據,並輸出到一個標簽查看這些數據
if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
document.getElementById("text").innerHTML = xmlhttp.responseText;然後把數據儲存到一個對象，看有沒有成功
var data = xmlhttp.responseText;
alert(data);再用JSON.parse()函數解析數據，輸出看是否成功
var obj = JSON.parse(data);
alert(obj.sites[0].name);最後就是動真格的了，把解析的數據填進標簽里
document.getElementById("h2").innerHTML = obj.sites[0].name;
document.getElementById("content").innerHTML = obj.sites[0].content;已經做到這裡了，樟哥再一次語重心長對我說了一句話：“……”
卧槽，ng的json解析這麼流弊？！
然後我就去搞ng的$http服務那塊了。
微信公眾號dkplus，由前端少俠dk搭建的分享平臺，主攻web前端，但也游離於設計，樂於分享他的代碼故事、ps技巧和ppt技巧。碼在江湖，身不由己，珍愛生命，簡約設計，我是前端，也是設計。博客園：http://www.cnblogs.com/dkplus/
