基本介绍

$http用于向服务端发起异步请求，同时还支持多种快捷方式如$http.get()、$http.post()、$http.jsonp。$hhtp也是属于内置服务的一种，这里特意提出来写一篇用法。

基本使用

传递的数据可以是'key=val&key=val'形式，这种形式叫formData，在请求头设置成   'Content-Type': 'application/x-www-form-urlencoded'  ，那么只有采用这样的方式进行传递

<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul ng-controller="DemoController">

</ul>

<script src="../libs/angular.min.js"></script>

<script>

    var App = angular.module('App', []);

    App.controller('DemoController', ['$scope', '$http', function ($scope, $http) {

        $http({

            url: '01.php',

            method: 'post',

            headers: {

                'Content-Type': 'application/x-www-form-urlencoded'

            },

            //get

            params: {

                name: 'itcast',

                sex: '男'

            },

            //post

            // data: 'age=10'

            data: { // post 传参

                age: 10

            }

        }).success(function (info) {

            console.log(info);

        });

    }]);

</script>

</body>

</html>

get方式

<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul ng-controller="DemoController">

</ul>

<script src="../libs/angular.min.js"></script>

<script>

    var App = angular.module('App', []);

    App.controller('DemoController', ['$scope', '$http', function ($scope, $http) {

        $http({

            url: '02.php',

            method: 'get',

            params: {

                name: 'wqx'

            }

        }).success(function (info) {

            console.log(info);

        });

    }]);

</script>

</body>

</html>

post方式

<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul ng-controller="DemoController">

</ul>

<script src="../libs/angular.min.js"></script>

<script>

    var App = angular.module('App', []);

    App.controller('DemoController', ['$scope', '$http', function ($scope, $http) {

        $http({

            url: '03.php',

            method: 'post',

            headers: {

                'Content-Type': 'application/x-www-form-urlencoded'

            },

            data: 'age=19'

        }).success(function (info) {

            console.log(info);

        });

    }]);

</script>

</body>

</html>

jsonp方式

（1）跨域的数据传递的数据类型是json，而json是不同平台传递数据的首选，十分方便，下面请求的后台，后台回传的是一个json字符串

（2）jsonp与ajax请求其实没有多大的关系，因为其内部实现的机制还是src属性的请求方式，这是一个get请求，其实现过程如下：

1、如果请求是JSONP，那么它的实现过程还是还原到原始的src的方式进行跨域访问

2、首先是创建一个script标签

3、添加其src属性，填写后台地址

4、将script标签添加到head标签中

5、当script标签的onload事件触发会立刻删除其标签，所以我们是看不见的
<!DOCTYPE html>

<html lang="en" ng-app="App">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<ul ng-controller="DemoController">

</ul>

<script src="../libs/angular.min.js"></script>

<script>

    var App = angular.module('App', []);

    App.controller('DemoController', ['$scope', '$http', function ($scope, $http) {

        $http({

            url: '04.php?callback=JSON_CALLBACK',

            method: 'jsonp'

        }).success(function (info) {

            console.log(info);

        });

    }]);

</script>

</body>

</html>

参数callback是约定俗成的，而值JSON_CALLBACK是angular特有的，在这里的作用相当于占位符，真正传递的时候会发生改变

Angular——$http的更多相关文章

  1. Forms in Angular 2

    Input handling is an important part of application development. The ng-model directive provided in A ...

  2. Event Binding in Angular

    https://www.pluralsight.com/guides/angular-event-binding Introduction In this guide, we will explore ...

  3. angular

  4. Download Excel file with Angular

    源码连接(编写中) 用Angular下载后台返回的Excel文件,用Blob实现,引用FileSaver.js 后台C#代码: [WebMethod] public static byte[] Cal ...

  5. 初识Angular

    一.AngularJs简介 1.AngularJS使用了不同的方法,它尝试去补足HTML本身在构建应用方面的缺陷.AngularJS通过使用我们称为标识符(directives)的结构,让浏览器能够识 ...

  6. Angular 1.x 升级到 Angular 2

    原项目用ng1.5写的,现在改成ng2.0了,踩了不少坑,不过都忘记了. 如果你也正好要做这个工作,正好看到这个文章,不妨参考下. AngularJs 1.x -> 2.0 ng-repeat ...

  7. 前端展望：取avalon，弃angular

    打给比方,如果说angularJS是剑,那么avalon就是匕首.匕首比剑更易学,更快,更适合快速作战... 我们还是直接来实际的吧:   目前项目开发中有以下几个通用需求: 有前端路由系统,用来划分 ...

  8. Angular $watch

    如果想在某个属性发生变化的时候执行某些操作,那么scope.$watch是最佳选择 https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$w ...

  9. angular使用总结

    一．是否有必要加入模块化框架 1.Reqruiejs seajs的主要作用 (1)模块化,让代码易于维护. angular本身就是mvc,模块化很清晰,所以这点用不到requirejs (2)可以按需 ...

  10. angular遇到问题

    一.一个js中只有一个angunlar.module,但可以有多个controller,从而控制多个不同的作用域,每个作用域都有独立的$scope.不同作用域之间又有$rootScope这个桥梁 二. ...

随机推荐

  1. 具体解说Android图片下载框架UniversialImageLoader之内存缓存（三）

    前面的两篇文章着重介绍的是磁盘缓存,这篇文章主要是解说一下内存缓存.对于内存缓存.也打算分两篇文章来进行解说.在这一篇文章中,我们主要是关注三个类, MemoryCache.BaseMemoryCac ...

  2. Good Zookeeper Tutorial with Java client

    参考: https://stackoverflow.com/questions/33524537/good-zookeeper-tutorial-with-java-client I was tryi ...

  3. 静态链表的C++实现

    静态链表是使用数组实现的能够高速插入和删除数据的链表,静态链表和链式单链表比的缺点在于链表的长度仅仅能初始化设置好,而相相应普通的顺序存储的链表,静态链表不能实现高速的读写随意的元素. 当然静态链表给 ...

  4. Mac OS X 10.10， Eclipse+ADT真机调试代码时，Device Chooser中不显示真机的解决方式

    Mac OS X 10.10的环境下.Eclipse+ADT,进行真机调试时,会出现一个问题. Device Chooser对话框里不显示真机设备,仅仅有又一次插拔数据线才干够. 经过測试.有两个暂时 ...

  5. 【bzoj1150】[CTSC2007]数据备份Backup

    将k对点两两相连,求最小长度 易证得,最优方案中,相连的办公楼一定是取相邻的比取不相邻的要更优 然后就可以用贪心来做这道题了.. 将初始所有的线段放进堆里 每次取最短的线段进行连接,且ans+=a[i ...

  6. java SocketChannel and ServerSocketChannel

    1 SocketChannel 1.1 打开一个SocketChannel SocketChannel socketChannel = SocketChannel.open(); socketChan ...

  7. oss

    import oss2 ''' auth = oss2.Auth('您的AccessKeyId', '您的AccessKeySecret') bucket = oss2.Bucket(auth, '您 ...

  8. go4--break,continue + 标签

    package main /* 指针 Go虽然保留了指针,但与其它编程语言不同的是,在Go当中不 支持指针运算以及”->”运算符,而直接采用”.”选择符来操作指针 目标对象的成员 操作符”&am ...

  9. 利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全)

    利用JFreeChart生成组合图表 (8) (转自 JSP开发技术大全) 14.8 利用JFreeChart生成组合图表  实例位置:光盘\mingrisoft\14\dxyy\02 通过JFree ...

  10. mybatis写当天 当月的数据 时间段数据

    1 数据库字段pk_time(Varchar) 当天的数据 SELECT * FROM 表 WHERE date(fk_time) = curdate(); 当月的数据 SELECT *FROM 表 ...