正所谓“人在江湖,身不由己”,在开发之路上前端少侠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/