angular js用ajax传值的简单尝试

最新推荐文章于 2023-11-15 20:51:09 发布

Monday_B

最新推荐文章于 2023-11-15 20:51:09 发布

阅读量2k

点赞数 2

分类专栏：前端文章标签： angular ajax javascript

本文链接：https://blog.csdn.net/Monday_B/article/details/53389858

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

场景：

查询在某段时间内使用某版本的用户信息

输入：

开始时间、结束时间、版本号

输出：

用户ID、用户昵称、跑步公里数

代码：

<body ng-app="app">
<div class="row" ng-controller="byDate">
    <p style="margin-top:5rem">根据日期查询用户</p>
    <div class="row" style="margin-top:5rem">
        <div class="col-xs-3">
            <input type="text" ng-model="startTime" class="form-control" placeholder="请输入开始时间" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm:ss'})" onChange="">
        </div>
        <div class="col-xs-3">
            <input type="text" ng-model="endTime" class="form-control" placeholder="请输入结束时间" onfocus="WdatePicker({dateFmt:'yyyy/MM/dd HH:mm:ss'})" onChange="">
        </div>
        <div class="col-xs-3">
            <input type="text" class="form-control" placeholder="请输入版本号" ng-model="appIdInput">
        </div>
        <div class="col-xs-3">
            <button class="btn btn-primary" ng-click="searchByDate()">查询</button>
        </div>
    </div>
    <div>
        <ul class="col-xs-2 col-xs-offset-1" style="min-height:30rem;margin-top:2rem">
            <li style="margin-top:1rem">用户Id</li>
            <li ng-repeat="x in lists">{{x.memberId}}</li>
        </ul>
        <ul class="col-xs-2 col-xs-offset-1" style="min-height:30rem;margin-top:2rem">
            <li style="margin-top:1rem">用户昵称</li>
            <li ng-repeat="x in lists">{{x.nickName}}</li>
        </ul>
        <ul class="col-xs-5 col-xs-offset-1" style="min-height:30rem;margin-top:2rem">
            <li style="margin-top:1rem">公里数</li>
            <li ng-repeat="x in lists">{{x.sumLength.toFixed(2)}}</li>
        </ul>
    </div>
    <div>
        <div class="col-xs-6" style="text-align: right">
            <button class="btn btn-primary" ng-click="prePage()" ng-show="notFirst">上一页</button>
        </div>
        <div class="col-xs-6">
            <button class="btn btn-primary" ng-click="nextPage()" ng-show="isMore">下一页</button>
        </div>
    </div>
</div>

<script>
var a=angular.module('app',[]);
    a.controller('byDate',function ($http,$scope) {
        var pageStart=0;
        var pageSize = 10;

         $scope.searchByDate = function () {
            var timestamp1 = Date.parse(new Date($scope.startTime))/1000;
            var timestamp2 = Date.parse(new Date($scope.endTime))/1000;
            $http({
                method:'POST',
                data:{
                    startDate:timestamp1,
                    endDate:timestamp2,
                    pageStart:pageStart,
                    pageSize:pageSize
                },
                params:{
                    appId:$scope.appIdInput,
                    userId:'11345973',
                    methodName:'searchUserInfoByTime'
                },
                url:"newDEyesPostProxy"
            })
                        .success(function (response) {
                            $scope.lists = response.userList;
                            if(response.userList.length == pageSize){
                                $scope.isMore = true;
                            }else{
                                $scope.isMore = false;
                            }
                            if(pageStart == 0){
                                $scope.notFirst = false;
                            }else{
                                $scope.notFirst = true;
                            }


            })
        }
        $scope.prePage = function(){
            pageStart -= pageSize;
            $scope.searchByDate();
        }
        $scope.nextPage = function(){
            pageStart += pageSize;
            $scope.searchByDate();
        }
    })
</script>
</body>