【码在江湖】前端少侠的json故事(中)：ng的json使用

dkplus.jpg

正所谓“人在江湖，身不由己”，在开发之路上前端少侠dk遇到过种种困难，尤其在与后端进行数据对接的时候，不得不逼迫自己以极快的速度去学习和掌握一些奇招怪式，正当他以为就凭一个原生的ajax请求便能对所有数据对接问题迎刃而解之际，更大的问题来了……

这时候，樟哥再一次语重心长地说道：小伙，去找本ng秘笈看看吧，学会$http神功便能配合我进行数据大挪移！
如果我没听错，ng秘笈、$http这特么又是什么鬼新名词啊！

于是，我再一次接受樟哥的建议，在菜鸟教程上打听到了ng秘笈。

经过两天两夜的苦心钻研，我把整本ng秘笈粗略的翻了一遍，对ng神功有了大概的了解：这特么就是把js降龙十八掌十八式合成一掌一式一招致命嘛，练不好的话很容易走火入魔滴啊！

好了，该说点正经事了，什么是ng神功呢？就是angular js，代码江湖里人称ng，$http是ng对ajax封装好的一个服务，用这一项服务可以省下很多用原生js进行ajax请求的代码。

之前我们要自己构造一个请求方法、自行判断请求的状态是否200、自行open()和send()，加入请求的地址……

在ng里，只要一个在$http服务里调用一个get()/post()方法，写入请求的地址，写好success()和error()的方法，这就完成了一个ajax的请求。

下面是一则示例代码

$scope.doRefresh = function() {

        $http.get("localhost:8080/dkplus",{
            params:{
                'tag' : 0,
                'id' : 1
            }
        })
        .success(function(data, status, header, config) {
            $scope.items = data.data;
        })
        .error(function(data, status, header, config){
            console.log('json解析错误');
        })

};

这是我比较熟悉的一种写法，他还有另一种形式，功能一样，我就不多做展示了。

第一句get()里面填入请求的地址，如果请求的同时要带上参数，那就带上params，如果不需要带参数，那就只写$http.get("localhost:8080/dkplus")就够了。

第二句success()是用于请求成功的情况下的，是否成功可以在请求的时候按下f12，查看network一项，看状态是否200或者response里有没有返回json数据。

一般情况下是可以的，如果说存在跨域请求问题，这时候要用到jsonp()的方法进行请求，我们以后会讨论这个问题。

function()里面的data就是++请求回来的数据++，$scope.items = data.data;里第一个data是++接收回来的数据++，第二个data其实是我请求的json里的++一个对象名++。

第三句error()就是用于错误情况的调用，在控制台中显示错误方法被调用了，方便调试程序。

经过两天不眠不休，我自认为自己已经修炼神功，激动不已，于是飞鸽传书给樟哥：

樟哥：
  小弟苦心修炼ng神功，而今掌握$http大法，数据大挪移，之日可待！

于是，我们第二天就进行了数据对接，结果就gg了，“在我电脑上本地测试是可以的啊～%>_<%～”。

至于是什么问题让这次ng的get()方法数据对接无疾而终呢？预知后事如何，请听下回分解。

dkplus公众号.jpg

微信公众号dkplus，由前端少侠dk搭建的分享平台，主攻web前端，但也游离于设计，乐于分享他的代码故事、ps技巧和ppt技巧。码在江湖，身不由己，珍爱生命，简约设计，我是前端，也是设计。博客园：http://www.cnblogs.com/dkplus/