AngularJS http
来源：互联网 发布：包工头记工软件 编辑：程序博客网 时间：2024/05/10 19:39
1、参数：
method：字符串，请求方法 post 或 get
url：字符串，请求地址。
params：字符串或者对象，将使用paramserializer序列化并且作为GET请求的参数。
data：字符串或者对象，作为请求信息数据的数据。
headers：对象，字符串或者函数返回表示发送到服务器的HTTP请求头。如果函数的返回值为空，则headers则不发送。函数接受一个配置对象作为参数。
xsrfHeaderName：字符串，填充XSRF令牌的HTTP请求头名称。
xsrfCookieName：字符串，含有XSRF令牌cookie的名字。
transformRequest：函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http请求体和请求头，并且返回他们的转换版（通常是序列化）。
transformResponse：函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http响应体和响应头，并且返回他们的转换版（通常是序列化）。
paramSerializer：字符串或者返回字符串的函数。用于编写请求参数（指定为对象）的字符串表示形式的函数。如果指令是字符串，那么将被解释为通过$injector注册的函 数，这意味着你能通过注册服务方式创建你自己的序列化程序。默认的序列化是$httpParamSerializer；或者你可以使用$httpParamSerializerJQLike。
cache：boolean，如果为true，一个默认的$http缓存将被作为请求的缓存，否则如果存在一个用$cacheFactory创建的缓存实例，则将用于缓存。
timeout：数值，毫秒，超时则让请求中止。
withCredentials：boolean，是否设置withcredentials flag的XHR对象。查看更多信息的凭据。
responseType：字符串，响应头类型。
2、返回：
data：字符串或对象。变换函数变换后的响应体。
status：数值，响应的http状态码。
headers：函数，响应头的getter函数。
config：对象，用于生成请求的配置对象。
statusText：字符串，响应的HTTP状态文本。
3、方法：
3.1、get(url,[config]);
url：请求地址。
config：请求配置对象。
3.2、delete(url,[donfig]);
url：请求地址。
config：请求配置对象。
3.3、head(url,[config]);
url：请求地址。
config：请求配置对象。
3.4、jsonp(url,[config]);
url：请求地址。
config：请求配置对象。
3.5、post(url,data,[config]);
url：请求地址。
data：请求内容。
config：请求配置对象。
3.6、put(url,data,[config]);
url：请求地址。
data：请求内容。
config：请求配置对象。
3.7、patch(url,data,[config]);
url：请求地址。
data：请求内容。
config：请求配置对象。
4、属性：
pendingRequests
当前正在等待的请求的配置对象数组。主要是为了用于调试目的。
defaults
请求头配置默认属性。
$httpParamSerializerJQLike
Http参数序列化程序。序列化程序也将按字母顺序排序的参数。
2、基本使用
method：字符串，请求方法 post 或 get
url：字符串，请求地址。
params：字符串或者对象，将使用paramserializer序列化并且作为GET请求的参数。
data：字符串或者对象，作为请求信息数据的数据。
headers：对象，字符串或者函数返回表示发送到服务器的HTTP请求头。如果函数的返回值为空，则headers则不发送。函数接受一个配置对象作为参数。
xsrfHeaderName：字符串，填充XSRF令牌的HTTP请求头名称。
xsrfCookieName：字符串，含有XSRF令牌cookie的名字。
transformRequest：函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http请求体和请求头，并且返回他们的转换版（通常是序列化）。
transformResponse：函数/函数的数组。转换函数或者一个包含转换函数的数组。转换函数获取http响应体和响应头，并且返回他们的转换版（通常是序列化）。
paramSerializer：字符串或者返回字符串的函数。用于编写请求参数（指定为对象）的字符串表示形式的函数。如果指令是字符串，那么将被解释为通过$injector注册的函 数，这意味着你能通过注册服务方式创建你自己的序列化程序。默认的序列化是$httpParamSerializer；或者你可以使用$httpParamSerializerJQLike。
cache：boolean，如果为true，一个默认的$http缓存将被作为请求的缓存，否则如果存在一个用$cacheFactory创建的缓存实例，则将用于缓存。
timeout：数值，毫秒，超时则让请求中止。
withCredentials：boolean，是否设置withcredentials flag的XHR对象。查看更多信息的凭据。
responseType：字符串，响应头类型。
2、返回：
data：字符串或对象。变换函数变换后的响应体。
status：数值，响应的http状态码。
headers：函数，响应头的getter函数。
config：对象，用于生成请求的配置对象。
statusText：字符串，响应的HTTP状态文本。
3、方法：
3.1、get(url,[config]);
url：请求地址。
config：请求配置对象。
3.2、delete(url,[donfig]);
url：请求地址。
config：请求配置对象。
3.3、head(url,[config]);
url：请求地址。
config：请求配置对象。
3.4、jsonp(url,[config]);
url：请求地址。
config：请求配置对象。
3.5、post(url,data,[config]);
url：请求地址。
data：请求内容。
config：请求配置对象。
3.6、put(url,data,[config]);
url：请求地址。
data：请求内容。
config：请求配置对象。
3.7、patch(url,data,[config]);
url：请求地址。
data：请求内容。
config：请求配置对象。
4、属性：
pendingRequests
当前正在等待的请求的配置对象数组。主要是为了用于调试目的。
defaults
请求头配置默认属性。
$httpParamSerializerJQLike
Http参数序列化程序。序列化程序也将按字母顺序排序的参数。
2、基本使用
$http({ method: "post", responseType: "json", url: "/StudentManage/GetPageList", headers: { "Content-Type": "application/x-www-form-urlencoded" }, data: { "pageIndex": $scope.currentPage, "pageSize": $scope.pageSize, "name": "", }, }).success(function (response) { //处理响应成功 $scope.currentPage = response.pageIndex; $scope.totalPage = response.pageCount; $scope.recordTotal = response.recordTotal; $scope.datas = response.Data; $scope.endPage = $scope.totalPage; }).error(function (result) { //处理响应失败 }).then(function (result) { })get请求
var url = "http://www.***.com:8000/api/User/GetUserInfo";var config = { "headers": { "Content-Type": "application/json", "Token": $rootScope.userModel.token }};$http.get(url, config).then(function (response) { return response.data;}, function (response) { return response.data;});*、分页示例
<!DOCTYPE html><html ng-app="myApp"><head> <meta name="viewport" content="width=device-width" /> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" /> <script src="~/Scripts/angular.js"></script> <title>Index</title></head><body> <div ng-controller="myController"> <paging> <table class="table table-striped table-bordered table-hover"> <tr> <th>序号</th> <th>姓名</th> <th>电话</th> <th>邮箱</th> <th>年龄</th> <th>国家</th> <th>城市</th> </tr> <tr ng-repeat="item in datas"> <td>{{item.Id}}</td> <td>{{item.Name}}</td> <td>{{item.Telephone}}</td> <td>{{item.Email}}</td> <td>{{item.Age}}</td> <td>{{item.Country}}</td> <td>{{item.City}}</td> </tr> </table> <ul class="pagination" num-pages="tasks.pageCount" current-page="tasks.currentPage" on-select-page="selectPage(page)"> <li ng-class="{disabled: noPrevious()}"> <a ng-click="firstPage()">First</a> </li> <li ng-class="{disabled: noPrevious()}"> <a ng-click="selectPrevious()">Previous</a> </li> <li ng-repeat="page in pages" ng-class="{active: isActive(page)}"> <a ng-click="selectPage(page)">{{page}}</a> </li> <li ng-class="{disabled: noNext()}"> <a ng-click="selectNext()">Next</a> </li> <li ng-class="{disabled: noNext()}"> <a ng-click="lastPage()">Last</a> </li> </ul> <ul> 当前使用中：共{{recordTotal}}条数据 第 {{currentPage}} 页 / 共 {{totalPage}} 页 </ul> </paging> </div> <script> var app = angular.module('myApp', []); app.controller('myController', function ($scope, $http) { $scope.currentPage = 1; $scope.pageSize = 10; $scope.totalPage = 1; $scope.pages = []; $scope.endPage = 1; //ok $http({ method: "post", responseType: "json", url: "/StudentManage/GetPageList", headers: { "Content-Type": " // your config" }, data: { "pageIndex": $scope.currentPage, "pageSize": $scope.pageSize, "name": "", }, }).success(function (response) { //处理响应成功 $scope.currentPage = response.pageIndex; $scope.totalPage = response.pageCount; $scope.recordTotal = response.recordTotal; $scope.datas = response.Data; $scope.endPage = $scope.totalPage; }).error(function (result) { //处理响应失败 }).then(function (result) { }) $scope.onSelectPage = function (page) { $http({ method: "post", responseType: "json", url: "/StudentManage/GetPageList", params: { "pageIndex": page, "pageSize": $scope.pageSize, "name": "", }, }).success(function (response) { $scope.currentPage = response.pageIndex; $scope.totalPage = response.pageCount; $scope.recordTotal = response.recordTotal; $scope.datas = response.Data; $scope.endPage = $scope.totalPage; }).then(function (result) { }) }; }); app.directive('paging', function () { return { restrict: 'E', template: '', replace: true, link: function (scope, element, attrs) { scope.$watch('totalPage', function (value) { scope.pages = []; for (var i = 1; i <= value; i++) { scope.pages.push(i); } if (scope.currentPage > value) { scope.selectPage(value); } }); scope.isActive = function (page) { return scope.currentPage === page; }; scope.selectPage = function (page) { if (!scope.isActive(page)) { scope.currentPage = page; scope.onSelectPage(page); } }; scope.selectPrevious = function () { if (!scope.noPrevious()) { scope.selectPage(scope.currentPage - 1); } }; scope.selectNext = function () { if (!scope.noNext()) { scope.selectPage(scope.currentPage + 1); } }; scope.noPrevious = function () { return scope.currentPage == 1; }; scope.noNext = function () { return scope.currentPage == scope.totalPage; }; scope.firstPage = function () { scope.currentPage == 1; scope.selectPage(1); } scope.lastPage = function () { scope.currentPage == scope.endPage; scope.selectPage(scope.endPage); } } }; }); </script></body></html>*、http 与 ng-repeat
<script> var app = angular.module('myApp', []); app.controller('customersCtrl', function ($scope, $http) { $http.get("/try/angularjs/data/Customers_JSON.php") .success(function (response) { $scope.names = response.records; }); });</script>或
<script> var url = '@Url.Content("~/ReportWebSite/ReadyVisitRateList")'; var app = angular.module('myApp', []); app.controller('customersCtrl', function ($scope, $http) { $scope.reportData = []; $http.post(url, { employeeID: $scope.employeeID, dateFrom: $scope.dateFormatter($scope.startDate), dateTo: $scope.dateFormatter($scope.endDate) }).then(function (response) { $scope.reportData = response.data.Data; }).catch(function (error) { $log.error('error:' + error); }).finally(function () { closeLoading(); }); });</script>或
<script> $http({ method: 'POST', url: '/StudentManage/check/', data: { field: attrs.ensureUnique, value: n } }).success(function (data) { //alert(1); controller.$setValidity('unique', data.isUnique); }).error(function (data) { //alert(2); controller.$setValidity('unique', false); });</script><div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr> </table></div>使用 orderBy 过滤器<table> <tr ng-repeat="x in names | orderBy : 'Country'"> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table>显示序号 ($index)<table> <tr ng-repeat="x in names"> <td>{{ $index + 1 }}</td> <td>{{ x.Name }}</td> <td>{{ x.Country }}</td> </tr></table>使用 $even 和 $odd<table> <tr ng-repeat="x in names"> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Name }}</td> <td ng-if="$even">{{ x.Name }}</td> <td ng-if="$odd" style="background-color:#f1f1f1">{{ x.Country }}</td> <td ng-if="$even">{{ x.Country }}</td> </tr></table> 0 0
- angularjs $http
- AngularJS $http
- angularjs $http
- AngularJS http
- AngularJS $http
- AngularJs(四)：$Http,$resource
- AngularJS $http Service
- AngularJS $http使用
- AngularJS中$http
- 10009---AngularJS Http
- AngularJS(03)---Http对象
- AngularJS $http service
- AngularJS $http简介1
- AngularJS - $http的config
- AngularJS for $http
- AngularJS中http拦截
- AngularJS中的$http
- $http AngularJS异步请求
- JDK源码走读（1）：开篇
- 解读 Android 官方 MVP 项目单元测试
- web前端之精通dojo二：连接外部服务
- ubuntu SBT（Spark）安装
- 完全分布式安装hbase,使用hbase自带的zookeeper
- AngularJS http
- Android工程gradle详解
- mysql regexp反转义\\
- 《JAVA与模式》之观察者模式
- FreeMarker宏macro的使用
- Groovy基础知识
- Android内存泄漏分析及调试
- bsxfun函数-matlab
- ML
