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

2022-12-31,,,

ngjson

正所谓“人在江湖,身不由己”,在开发之路上前端少侠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,由前端少侠dk搭建的分享平台,主攻web前端,但也游离于设计,乐于分享他的代码故事、ps技巧和ppt技巧。码在江湖,身不由己,珍爱生命,简约设计,我是前端,也是设计。博客园:http://www.cnblogs.com/dkplus/

【码在江湖】前端少侠的json故事(中)ng的json的相关教程结束。

《【码在江湖】前端少侠的json故事(中)ng的json.doc》

下载本文的Word格式文档,以方便收藏与打印。