基本介绍

$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 Toast小解

    简单介绍:Toast英文含义是吐司,在Android中.它就像烘烤机里做好的吐司弹出来,并持续一小段时间后慢慢消失. Toast也是一个容器,能够包括各种View,并承载着它们显示. Android中 ...

  2. LintCode 近期公共祖先

    中等 近期公共祖先 查看执行结果 34% 通过 给定一棵二叉树,找到两个节点的近期公共父节点(LCA). 近期公共祖先是两个节点的公共的祖先节点且具有最大深度. 您在真实的面试中是否遇到过这个题? Y ...

  3. C#之快速排序 C#之插入排序 C#之选择排序 C#之冒泡排序

    C#之快速排序   算法描述 1.假定数组首位元素为“枢轴”,设定数列首位(begin)与末位(end)索引: 2.由末位索引对应元素与“枢轴”进行比较,如果末位索引对应元素大于“枢轴”元素,对末位索 ...

  4. 状压DP问题

    状态压缩·一 题目传送:#1044 : 状态压缩·一 AC代码: #include <map> #include <set> #include <list> #in ...

  5. [Python] How to unpack and pack collection in Python?

    It  is a pity that i can not add the video here. As a result, i offer the link as below: How to unpa ...

  6. Gif验证码类

    package com.paic.bics.common.utils.vcode; import java.awt.AlphaComposite; import java.awt.Color; imp ...

  7. web 页面传值乱码问题

    今天碰到一个问题,将A页面中文值传到B页面,session保存,然后在C页面显示,页面显示乱码 百度了一下什么原因,以为是session保存中乱码,于是将B页面的通过Server.UrlDecode( ...

  8. YII2 的授权（Authorization）

    说明:翻译本不是我应该做的,由于我的英语水平实在太差.但由于对YII的兴趣.所以也做一点.同一时候也能显示出我的胆量还是有的...希望不误导您. 由于这里MD语法的内容显示不全.您能够去这里看看. A ...

  9. iOS开发——常见BUG——导航控制器中的子控制器设置StatusBar状态失效的问题

    iOS9之前控制StatusBar的两种方式: 第一种方式:全局控制StatusBar 1. 在项目的Info.plist文件里设置UIViewControllerBasedStatusBarAppe ...

  10. 加载jQuery库

    使用google <head> <script type="text/javascript" src="http://ajax.googleapis.c ...