基本介绍

$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. js程序基础字符串具体

    1.     .charAt()里面写数字 在一般浏览器上相当于方括号  可是由于IE6的存在他就有了用处  由于IE6不兼容方括号 2.     charCodeAt()    和charAt几乎相 ...

  2. How to enable Google Play App Signing

    how to enable google play app signing  ------------------------------------------------------------- ...

  3. webpack—入门

    点击进入webpack官网.,开始教程时,建议先学习ES6语法,也请先观看本篇Windows符号介绍文章,当所有webpack内容学习完后,会有一个专门的介绍 webpack四个核心概念(从官网入门— ...

  4. 理解C语言中指针的声明以及复杂声明的语法

    昨天刚把<C程序设计语言>中"指针与数组"章节读完,最终把心中的疑惑彻底解开了.如今记录下我对指针声明的理解.顺便说下怎样在C语言中创建复杂声明以及读懂复杂声明. 本文 ...

  5. opencl+opencv实现sobel算法

    这几天在看opencl编程指南.照着书中的样例实现了sobel算法: 1.结合opencv读取图像,保存到缓冲区中. 2.编写和编译内核.并保存显示处理后的结果. 内核: const sampler_ ...

  6. 内容原发网站seo不重视2个标签，导致seo效果不如转发网站

    采集数据,挖掘观点,小心求证,得出结论 时间经过 今日凌晨,爬虫热点采集,其中第一财经是目标站之一,采集到了 http://www.yicai.com/news/5391233.html 谷歌去年悄然 ...

  7. 容器ArrayList原理（学习）

    一.概述 动态数组,容量能动态增长,元素可以为null,用数组存储,非线程同步(vector线程同步) 每个 ArrayList 实例都有一个容量,该容量是指用来存储列表元素的数组的大小,自动增长(默 ...

  8. 【Silverlight】Bing Maps学习系列（五）：绘制多边形（Polygon）图形（转）

    [Silverlight]Bing Maps学习系列(五):绘制多边形(Polygon)图形 Bing Maps Silverlight Control支持用户自定义绘制多边形(Polygon)图形, ...

  9. go语言---defer

    go语言---defer https://blog.csdn.net/cyk2396/article/details/78885135 defer 是在函数退出前调用,多个defer遵循 先进后出 的 ...

  10. 洛谷 P1314 聪明的质监员 —— 二分

    题目:https://www.luogu.org/problemnew/show/P1314 显然就是二分那个标准: 当然不能每个区间从头到尾算答案,所以要先算出每个位置被算了几次: 不知为何自己第一 ...