【码在江湖】前端少侠的json故事（上）日月第一击

日月第一击

这是我前端生涯第一次和后台对接，其经历真是苦不堪言，多次绝处逢生，柳暗花明，可就是迟迟见不到那条村子。当然，最后我还是完成了这次对接。下面来聊一聊我这白痴一般的经历。

序章

话说天下大势，分久必合，合久必分。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/