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对象,需要先引入这个对象。

posted on 2017-09-17 13:27  Yoooshiki  阅读(428)  评论(0编辑  收藏  举报

导航