AngularJS の $http サービスコンテンツ-jsチュートリアル-php.cn

AngularJS の $http サービスコンテンツ

一个新手

リリース： 2017-09-22 09:22:15

オリジナル

1174 人が閲覧しました

$http ショートカットメソッドを使用してサーバーと対話します
AngularJS では、ページとサーバー間の対話には主にモジュールの呼び出しが含まれます。
リクエストのタイプに応じて、$http モジュールはさまざまな呼び出しメソッドを提供します。その一般的な形式は次のとおりです。

パラメータの説明:
url: 相対または絶対のサーバーリクエストパスを示します。
リクエストタイプ: POST、GET、JSONP、DELETE、PUT、HEADの6つの一般的なリクエストメソッドが含まれます。 PUT タイプのリクエストは、オプションのパラメーター data を通じてデータを送信でき、また、オプションのパラメーター config を通じてリクエスト中に渡されるデータを設定することもできます。

$httpリクエストが成功すると、サーバーから返されたデータと関連情報をコールバックのsuccessメソッドで取得できます。
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 メソッドを直接呼び出して成功データと例外データを取得できます。

次の 2 つのコードは同じ機能を持っています。

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

ログイン後にコピー

は

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

ログイン後にコピー

と同等で、fn1 と fn2 はそれぞれリクエストの成功とエラーの戻り関数を表します。
両方の機能は同じですが。ただし、then メソッドを使用するとサーバーから完全な応答オブジェクトを受信できますが、success メソッドと error メソッドは解析および処理された応答オブジェクトのみを受信します。つまり、then メソッドで取得される戻りオブジェクトはよりオリジナルで完全なものになります。

以上がAngularJS の $http サービスコンテンツの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。