zoukankan      html  css  js  c++  java
  • angularjs $http 服务

    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script src="angular.min.js"></script>
    <script>
    angularjs是独立的框架,可以不用jquery.
    
    ng的服务:
    --$scope
       --$watch    :scope的子服务
       --$apply    :scope的子服务
    --$rootScope
    --$timeout
    --$interval
    --$filter
    --$http        :类似于ajax,这是angularjs自带的请求方式不同于jquery的请求。
    
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope','$http',function($scope,$http){
        $http({
            method : 'GET',
            url : 'data.php'
        }).success(function(data,state,headers,config){
            console.log(state);//请求成功返回200状态
        }).error(function(data){
            console.log(data);
        });
        
        
        $http.get('data.php').success(function(data,state,headers,config){
            console.log(data);
        });
        
    }]);
    
    </script>
    </head>
    
    <body>
    <div ng-controller="Aaa">
    </div>
    </body>
    </html>
    <!DOCTYPE HTML>
    <html ng-app="myApp">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <script src="angular.min.js"></script>
    <script>
    
    var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope','$http','$timeout',function($scope,$http,$timeout){
        var timer = null;
        $scope.data = [];
        
        $scope.change = function(name){
            $timeout.cancel(timer);        
            timer = $timeout(function(){        
                $http({   
                    method : 'JSONP',
                    url : 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd='+name+'&cb=JSON_CALLBACK'
                }).success(function(data){
                    //console.log(data);
                    $scope.data = data.s;
                });        
            },500);        
        };                
    }]);
    
    </script>
    </head>
    
    <body>
    <div ng-controller="Aaa">
        <input type="text" ng-model="name" ng-keyup="change(name)">
        <input type="button" ng-click="change(name)" value="搜索">
        <ul>
            <li ng-repeat="d in data">{{d}}</li>
        </ul>
    </div>
    </body>
    </html>
  • 相关阅读:
    python jinja2模板分页效果
    vscode配置svn
    解决VSCODE打开新文件覆盖上一个窗口的问题
    vue所用插件整理
    vue bus总线
    create-react-app使用less
    react入门
    ES6|Object
    vue轮播插件--vue-awesome-swiper
    js/jq中遍历对象或者数组的函数(foreach,map,each)
  • 原文地址:https://www.cnblogs.com/yaowen/p/5742029.html
Copyright © 2011-2022 走看看