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

日月第一击

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

【码在江湖】前端少侠的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/

上一篇:思维|奇偶周期对称的高阶认知


下一篇:[java]2015上海邀请赛 B Base64