基本介绍

$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. Sound Card Chip

      DELL sigmatel stac   Hewlett-packard conexant High Definition Audio chip   lenovo(IBM) Analo Devic ...

  2. Network problem solving flow chart

    来自为知笔记(Wiz)

  3. node-npm/yarn

    很多人对npm或yarn了解甚少吧,下面我介绍一下常用的yarn/npm所谓的包管理工具. 首先我先介绍一下,npm属于国外Google镜像(下载贼慢),yarn属于Facebook开发的. npm: ...

  4. vim note(5)

    .vimrc 的设置 $HOME/.vimrc 的普通设置,例如以下. set nocompatible "" not compatible with VI "" ...

  5. Appro DM8127 IPNC 挂载NFS遇到的问题及解决

    对于Appro DM8127 IPNC,默认的启动方式是NAND is used for booting kernel and NAND is used as root filesystem 为了调试 ...

  6. iOS 开发 公司开发者账号,在多台Mac上合作开发，共用一个账号和证书--图文详解

    参考 导出证书申请的MAC里的Xcode的开发者账号 .developerprofile 导出的开发者账号文件.developerprofile 导出PKCS12既是.p12文件 所拷贝的资料, .d ...

  7. 洛谷 P1970 花匠 —— DP

    题目:https://www.luogu.org/problemnew/show/P1970 普通的DP,f[i][0/1] 表示 i 处处于较小或较大的长度: 注意:1.树状数组向后 query 时 ...

  8. bzoj2594 [Wc2006]水管局长数据加强版——LCT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2594 时间倒序一下,就是 魔法森林 那道题: 有个不解的地方,是 access 里面关于 p ...

  9. bzoj3339

    线段树+离线 这种题既可以用莫队做也可以用线段树做,跟hh的项链差不多 首先我们处里出前缀mex,也就是1->i的mex值,再预处理出每个数下一次出现的位置,然后把每个前缀mex插入线段树,每个 ...

  10. sql复杂查询语句总结

    转自:http://blog.csdn.net/fengfeng91/article/details/15029173 create table student( sno varchar2(10) p ...