AngularJS使用Ajax请求
因为新公司的前端JS框架使用的是AngularJS, 由于对这个框架不熟悉,刚进公司还被这个框架折磨了好一段时间。
后台的Controller层向前台传数据,并非是像JSP那样使用EL表达式来取数据,也不是像ThymeLeaf模板那样使用th标签来取数据,而是先到前端的service层(service通过对Apis.js的调用),再到前端的controller层,通过对$scope对象的赋值,以及html标签的ng-model指令,实现数据双向绑定。
但是在工作中,有一个问题困扰了我一段时间,那就是貌似AngularJS不能使用“?”传参了,因为调用后台的方法是写在Apis.js中,而service.js是使用的回调函数,也就是说,数据并不能传到Apis.js的方法中,事实上Apis.js的方法也仅仅是放一个Controller的请求映射和请求方式,仅此而已,根本没有用来接受参数,那么,如下面这种问号传参的方式是根本不能用了:
"/api/equiment/list?userCode="+userCode+"&dufaultCode="+defaultCode;
那么如何解决呢?我想到的是使用Ajax.
AngularJS中使用Ajax
AngularJS中,有一个$http对象,这个对象封装了$http.get()
,$http.post()
,$http.put()
,$http.delete()
方法,使用方法如下:
service.getList(userCode,dufaultCode){
var url="/api/equiment/list?userCode="+userCode+"&dufaultCode="+defaultCode";
$http.get(url).success(function(data){
//成功后的数据处理
$scope.xxx=data.result;
}).error(function(data){
//失败后的提示
console.log("error",data);
});
}
这样一来,就可以直接从后台获取到数据,而不用到service.js、apis.js那里绕一圈了。
当然,想要在当前的controller中使用$http对象,需要先引入这个对象。