AngularJS의 $http 서비스 콘텐츠-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

AngularJS의 $http 서비스 콘텐츠

一个新手

Sep 22, 2017 am 09:22 AM

angularjs http javascript

$http 단축 메소드를 사용하여 서버와 상호작용
AngularJS에서 페이지와 서버 간의 상호 작용에는 주로 모듈 호출이 포함됩니다.
$http 모듈은 요청 유형에 따라 다양한 호출 방법을 제공합니다. 일반적인 형식은 다음과 같습니다.

매개변수 설명:
url: 상대 또는 절대 서버 요청 경로를 나타냅니다.
요청 유형: POST, GET, JSONP, DELETE, PUT 및 HEAD 등 6가지 일반적인 요청 방법이 포함됩니다. PUT 유형 요청은 선택적 매개변수 data를 통해 데이터를 보낼 수 있으며, 선택적 매개변수 config를 통해 요청 중에 전달되는 데이터를 설정할 수도 있습니다.

$http 요청이 성공하면 서버에서 반환하는 데이터 및 관련 정보를 콜백의 성공 메서드에서 얻을 수 있습니다.
data: 매개변수 반환 본문을 나타내며 일반적으로 요청에 의해 반환된 결과 집합입니다.
status: 요청 후 반환된 상태 값을 나타냅니다.
headers: 요청 후 반환된 헤더 파일을 나타내며, 반환된 요청의 헤더 정보를 표시하는 데 사용됩니다.
config: HTTP 요청을 보낼 때 전체 구성 정보를 얻을 수 있는 개체입니다.

$http 구성 개체를 사용하여 서버와 상호 작용
위에서는 /$http 단축키를 사용하여 서버와 상호작용하는 프로세스를 소개했습니다. 이 방법은 간단하지만 구성의 유연성이 부족하고 많은 코드가 필요합니다. 이러한 상황에 대응하여 $http 서비스 템플릿을 함수로 사용하고, XHR 객체를 구성하는 모든 구성 항목을 객체로 처리하고, 호출 시 해당 객체를 함수의 형식 매개변수로 정의하기만 하면 됩니다. 각 속성 값은 다음과 같습니다.

$http({
    method: //表示请求方式，是字符串，常有POST、GET、JSONP、DELETE、PUT、HEAD六种方式
    url:    //表示向服务器请求的地址
    data:   //是一个对象，在使用POST/PUT时，该对象将作为消息体的一部分发给服务端
    params: //是字符串或对象，发送HTTP请求时，如果是对象，将自动按json格式进行序列化，并追加到url后面，作为发送数据的一部分，传递给服务器。
    transformRequest://对请求体信息和请求体进行序列化转换，并生成一个数组发送给服务端。
    transformResponse://对相应体头信息和相应体进行反序列化转换，其实质就是解析服务器发送来的被序列化后的数据。
    cache://布尔值(true/false),表示是否对http请求返回的数据进行缓存，如果设置为true,则表示需要缓存。
    timeout://表示延迟http请求的时间，单位是毫秒。})

로그인 후 복사

예:
요구 사항 설명:
페이지에 텍스트 상자 버튼을 추가합니다. , 사용자가 텍스트 상자에 숫자를 입력하고 버튼을 클릭하면 $http 함수가 호출되어 서버에 HTTP 요청을 보내고 숫자의 패리티를 확인하고 확인 결과를 페이지 요소에 표시합니다.

<!DOCTYPE html><html ng-app="a7_3"><head>
    <meta charset="UTF-8">
    <title>使用$http配置对象方式与服务端交互</title>
    <script src="../script/angular.min.js"></script>
    <link href="Css/css7.css" rel="stylesheet" ></head><body>
    <p class="frame" ng-controller="c7_3">
        <p class="show">
            <input type="text" ng-model="num">
            <button ng-click="onclick()">验证奇偶</button>
            <p class="tip">您输入的是:{{result}}</p>
        </p>
    </p>
    <script type="text/javascript">
        angular.module(&#39;a7_3&#39;,[])
            .controller(&#39;c7_3&#39;,function($scope,$http){
                $scope.num = 0;
                $scope.result = "偶数";
                $scope.onclick = function(){
                    $http({
                        method: &#39;GET&#39;,
                        url: &#39;data/chk.php&#39;,
                        params:{
                            n: $scope.num
                        }
                    }).success(function(data,status,headers,config){
                        $scope.result = data;
                    })
                }
            });    
      </script>
    </body>          
 </html>

로그인 후 복사

분석:
이 예제의 js 코드에서는 사용자가 버튼을 클릭하면 버튼에 바인딩된 onclick 메서드가 트리거됩니다. 이 메서드에서는 $http 서비스가 호출되어 다음 함수에 전달됩니다. 메소드, url, 기타 속성 값 등의 매개변수 형식
GET 요청을 사용하기 때문에 텍스트 상자에 있는 값은 params 속성을 통해 키/값 형식으로 서버에 전달됩니다.
이 예에서 요청된 URL의 최종 내용은
htpp://localhost/Ch7/data/chk.php?n=87입니다. 여기서 n은 키 이름이고 87은 키 값(입력한 숫자)입니다. 텍스트 상자에 .

/$http 함수가 HTTP 요청을 보낼 때 succes 메서드를 통해 서버에서 반환된 데이터 내용 및 기타 헤더 정보를 얻을 수 있습니다. 예를 들어 data는 반환된 데이터로, 사용자가 에 입력한 숫자입니다. 텍스트 상자.

Angular에서는 /$http 함수를 실행한 후 반환되는 내용이 실제로 Promise 객체이므로 체인 쓰기를 통해 then 메서드를 직접 호출하여 성공 및 예외 데이터를 얻을 수 있습니다.

다음 두 코드는 동일한 기능을 가지고 있습니다.

$http({//配置对象})
.succes(fn1)
.error(fn2)

로그인 후 복사

는

$http({//配置对象
})
.then(fn1,fn2)

로그인 후 복사

fn1과 동일하며 fn2는 각각 요청 성공 및 오류의 반환 기능을 나타냅니다.
둘의 기능은 동일하지만. 그러나 then 메소드를 사용하면 서버로부터 완전한 응답 객체를 받을 수 있는 반면, 성공 및 오류 메소드는 구문 분석되고 처리된 응답 객체만 수신합니다. 이는 then 메소드로 얻은 반환 객체가 더 독창적이고 완전하다는 것을 의미합니다.

위 내용은 AngularJS의 $http 서비스 콘텐츠의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.