AngularJS http

最新推荐文章于 2022-03-29 09:36:38 发布

KingCruel

最新推荐文章于 2022-03-29 09:36:38 发布

阅读量862

点赞数

分类专栏： AngularJS 文章标签： angular angular http ng-repeat

本文链接：https://blog.csdn.net/KingCruel/article/details/53907034

版权

AngularJS 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

参考网址：Angular - HttpClient

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、基本使用

   $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>

KingCruel

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS http

参考网址：Angular - HttpClient1、参数： method：字符串，请求方法 post 或 get url：字符串，请求地址。 params：字符串或者对象，将使用paramserializer序列化并且作为GET请求的参数。 data：字符串或者对象，作为请求信息数据的数据。 headers：对象，字符串或者函数返回表示发送到...
复制链接

扫一扫

专栏目录