基本介绍

$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 Jni Android.mk经常使用语句

    仅仅要涉及JNI开发都涉及到Android.mk编写,它也是一种makefile语言. 以上一篇博客中提供的project为例! <1> : 信息打印 : 既然是一种简易语言那么首先应该知 ...

  2. jQuery無刷新上傳之uploadify簡單試用

    先簡單的侃兩句:貌似已經有兩個月的時間沒有寫過文章了,不過仍會像以前那样每天至少有一至兩個小時是泡在园子裏看各位大神的文章.前些天在研究“ajax無刷新上傳”方面的一些插件,用SWFUpload實現了 ...

  3. 科普：google的数字图书馆

    https://books.google.com/ngrams Google Ngram Viewer,她利用google所拥有的所有图书作为资源,为你提供单词和短语历年使用次数的展示图标.数据化了数 ...

  4. java 开发webservice

    这几天用java开发一个webservice,搞死了.java果然很难侍候! 传说java搞webservice,有好几种途径(为什么不是一种?要搞这么多种,让人一听,头都大了.当然啦,生物多样性总是 ...

  5. javascript下获取guid或者UTC时间作为唯一值

    javascript下,有时出于需要,可以利用guid或UTC时间作为当前页面中的唯一值. 什么场景需要弄这个唯一值? 比如说,用easyUI的treegrid,添加新节点.在treegrid里面 , ...

  6. Bridge Page

    http://www.zzbaike.com/wiki/%E6%A1%A5%E9%A1%B5 桥页(Bridge Page),又叫“门页”(Doorway/Portal/Jump/Entry Page ...

  7. Delphi各销售版本之间的区别

    初步的区别: http://www.embarcadero.com/products/delphi/product-editions http://www.embarcadero.com/fr/pro ...

  8. 控件CListCtr详解

    1.CListCtrl控件 CListCtrl控件在数据库编程中是用得比较多的控件之一,也是Window控件中较难掌握的一个控件.他可以有四显示方式,Report.List.Icon.SmallIco ...

  9. A Go library implementing an FST (finite state transducer)——mark下

    https://github.com/couchbaselabs/vellum Building an FST To build an FST, create a new builder using ...

  10. Code First：Fluent API

    DbContext类有一个OnModelCreating方法,可以在这里配置模型,该方法接收一个类型为DbModelBuilder的建造者,本文介绍的为Data Anotation的等价方法,这些代码 ...