angularJS 의$http:서버 와 의 대화

4016 단어 AngularJS
angularJS 에서 원 격 HTTP 서버 와 대화 할 때 매우 중요 한 서비스-$http 를 사용 합 니 다.
  • $http 는 angular 의 핵심 서비스 로 브 라 우 저의 xml.httprequest 또는 via JSONP 대상 을 이용 하여 원 격 HTTP 서버 와 상호작용 을 합 니 다
  • $http 의 사용 방식 은 jquery 가 제공 하 는$.ajax 작업 과 같 으 며,모두 다양한 method 의 요청,get,post,put,delete 등 을 지원 합 니 다

  • $http 의 다양한 방식 의 요청 이 rest 스타일 에 가 까 워 집 니 다
  •    controller 에서$scope 와 같은 방식 으로$http 대상 을 가 져 올 수 있 습 니 다.예 를 들 어 function controller($scope,$http){}

  •   
    다음은$http 서비스의 사용 설명 을 진행 합 니 다.다음 과 같이 호출 합 니 다.
       
    $http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

     
  • config 는 JSON 대상 으로 이 요청 의 url,data,method 등 을 포함 합 니 다.예 를 들 어{url:"login.do",method:"post",data:{name:"12346",pwd:"123"}.
  • method  {String}요청 방식 예:"GET"."POST"
  • url{String}요청 한 URL 주소
  • params{key,value}요청 매개 변 수 는 URL 에 연 결 됩 니까?key=value
  • data{key,value}데 이 터 는 요청 에 넣 어 서버 로 보 냅 니 다
  • cache{boolean}이 true 라면 http GET 요청 시 기본$http cache 를 사용 합 니 다.그렇지 않 으 면$cache Factory 의 인 스 턴 스 를 사용 합 니 다
  • timeout{number}설정 시간 초과

  • 2.success 는 요청 성공 후의 리 셋 함수 이 고 error 는 요청 실패 후의 리 셋 함수 입 니 다.여 기 는 주로 되 돌아 오 는 네 개의 매개 변 수 를 설명 합 니 다.
    데이터 응답 체
    status 상응하는 상태 값
  • headers 가 getter 의 함 수 를 가 져 옵 니 다
  • config 요청 중의 config 대상,상기 1 시   

      
    여러분 이 HTTP 서버 와 상호작용 하 는 것 을 편리 하 게 하기 위해 angularJS 는 각 요청 방식 의 방법 을 제공 합 니 다.
    $http.put/post(url,data,config)url,name 필수,config 선택 가능
          $http.get/delete/jsonp/head(url,confid) url 필수,config 선택 가능
    url,data,config 는$http 의 인자 와 일치 합 니 다.
     
    다음은$http()및$http.post()를 어떻게 사용 하 는 지 보 여 주 는 simple demo 가 있 습 니 다.
      
    <!DOCTYPE HTML>
    
    <html lang="zh-cn" >
    
    <head>
    
        <meta charset="UTF-8">
    
        <title>CSSClasses</title>
    
        <script src="angular.min.js" type="text/javascript"></script>
    
    <script type="text/javascript">
    
        function ctrl($http,$scope){
    
            $scope.login = function(user){
    
                $http.post("login.do",user).success(function(data, status, headers, config){
    
                    alert("success");
    
                }).error(function(data, status, headers, config){
    
                    alert("error");
    
                })
    
            }
    
            $scope.login1 = function(user){
    
                $http({url:"login.do",data:user}).success(function(data, status, headers, config){
    
                    alert("success");
    
                }).error(function(data, status, headers, config){
    
                    alert("error");
    
                })
    
            }
    
        }
    
    </script>
    
    </head>
    
    <body ng-app>
    
        <div ng-controller="ctrl">
    
            <form name="loginFm">
    
                Name:<input ng-model="user.name" />
    
                pwd: <input ng-model="user.pwd" />
    
                <input type="button" value="login" ng-click="login(user)" />
    
                <input type="button" value="login1" ng-click="login1(user)" />
    
            </form>
    
        </div>
    
    
    
    </body>
    
    </html>

    좋은 웹페이지 즐겨찾기