首页 > 代码库 > AngularJS(八):http服务

AngularJS(八):http服务

本文也同步发表在我的公众号“我的天空

 

技术分享

 

 http服务

 

之前我们的示例都是在本地获取模拟数据,在实际应用中,所有的项目都将不可避免的从后台获取数据,我们都是通过Ajax来实现与服务器的通信。在AngularJS中,我们使用http服务来实现与后台的数据交互,http服务的使用请看以下代码:

 

    var app=angular.module("myApp",[]);
    app.controller("person",function($scope,$http){
        $http.get(‘http://test.php‘)
       .success(function(data){
           //加载成功后的处理,data为返回的数据
       }).error(function(data){
           //加载失败后的处理,data为返回的数据
       })
     });

 

在以上代码中,我们在控制器代码中添加了$http模块,这样便可以使用http服务了,我们采取get的方式访问了一个url,随后在success()与error函数中分别针对加载成功或失败做相应的处理。测试http服务时请注意,所请求的url必须是在web服务上的,而不能在本地测试。如果要向后台传递参数,则应该添加params参数,如下:

 

$http.get(‘http://test.php‘,{params:{id:‘5‘,name:‘张三‘}
    }) .success(function(data){
           ......
    }).error(function(data){
           ......
     })

 

在以上代码中,我们添加了两个传递到后台的参数,分别是id和name,其值分别是“5”与“张三”。

 

如果要使用POST方式与后台通信,则应使用$http.post()方法,要注意的是params参数应该放在第三个参数位置,如下:

 

$http.post(‘http://test.php‘,‘‘,{params:{id:‘5‘,name:‘张三‘}})


通常,我们会给请求传递一个配置对象,以便灵活的对请求进行配置,其调用形式如下:$http(config),config为一个对象,可对其设置请求方式(get/post)、请求的url、传递参数、超时时间等。如以上的示例可写成如下代码:

 

$http({
    method:‘post‘,
    url:‘http://test.php‘,
    params:{id:5,name:‘张三‘}
   }).success(function(data){
        ......
   }).error(function(data){
       ......
  })

 

对于config的更多配置参数,可以查阅AngularJS相关文档。

AngularJS(八):http服务