基本介绍
$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特有的，在这里的作用相当于占位符，真正传递的时候会发生改变