angularJS 의$http:서버 와 의 대화 예제

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){});

1.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 는 요청 실패 후의 리 셋 함수 입 니 다.여 기 는 주로 되 돌아 오 는 네 개의 매개 변 수 를 설명 합 니 다.

data 응답 체

status 해당 상태 값

headers 에서 getter 함수 가 져 오기

config 요청 중의 config 대상,상기 1 시

여러분 이 HTTP 서버 와 상호작용 하 는 것 을 편리 하 게 하기 위해 angularJS 는 각 요청 방식 의 방법 을 제공 합 니 다.
$http.put/post(url,data,config)url,name 필수,config 선택 가능
$http.get/delete/jsonp/head(url,config)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>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

SpringMvc+Angularjs 멀티 파일 대량 업로드

SpringMvc 코드 jar 가방 commons-fileupload commons-io spring-mvc.xml 구성 Controller 로컬 저장 AngularJs 코드 Form 양식 커밋 위에서 말한 것은 여...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

angularJS 의$http:서버 와 의 대화 예제

좋은 웹페이지 즐겨찾기