ホームページ  >  記事  >  ウェブフロントエンド  >  AngularJS 組み込みサービス $http を使用するにはどうすればよいですか? angularjs$httpの使用例

AngularJS 組み込みサービス $http を使用するにはどうすればよいですか? angularjs$httpの使用例

寻∝梦
寻∝梦オリジナル
2018-09-08 14:54:361446ブラウズ

この記事では、angularjsの組み込みサービス$httpについて詳しく紹介します。 angularjs の $http の構文、その使用方法、および完全なコードは記事にあります。今すぐこの記事を見てみましょう

AngularJS 組み込みサービス $http

AngularJS は、多数の組み込みサービスを提供します これらの組み込みサービスを通じて、迅速に実行できます。一部のビジネス関数プロセスは、次のように自動的に処理されます。

$window: は、 window オブジェクト をネイティブ

に挿入するために使用されます。 JS

$document: documentdocumentオブジェクトを挿入するために使用されます$timeout:

カプセル化されたネイティブJSにを挿入するために使用されます setTimeout() 関数処理$interval:

は、カプセル化されたネイティブJSsetInterval()setInterval()を注入するために使用されます。

$location: は、locationオブジェクトをネイティブJSに挿入するために使用されます。これは、URLアドレスやその他の操作

に便利です

$ http:カプセル化されたAjaxオペレーションを注入して、非同期データリクエストなどを実行するために使用します

今日はAngularJSの組み込みサービスの $httpを中心に説明します。

$http:

$httpサービスは、AngularJSのコアサービスの1つであり、主にXMLHttpRequestをカプセル化します。 オブジェクトとJSONP リモートサービスのデータリクエストを完了するためのデータアクセスモード!

従来の構文構造:

$http({
	method:”GET”,/* 请求发送方式 */
	url:”http://......../com” /* 请求地址*/
}).then( /* then()函数表示请求完成之后的操作 */
	function(response) {
		/* 请求成功之后的操作函数 */
  },
  function(response) {
  	/* 请求失败时候的操作函数 */
  }
);

開発者が非同期データリクエストを迅速に処理できるようにするために、AngularJS は開発を容易にする一連のショートカット関数を提供します。これには主に次の関数が含まれます:

l $http.get( )

l $http.post()

l $http.jsonp()

l $http.header()

l $http.patch()

l $http .put()

l $http.delete()

$http.get(“url”).then(fn1, fn2);

実際、ショートカットは単純なカプセル化です $ http サービスでは、通常のプロジェクト開発中に、元の組み込みサービス $http$http({}).then(fn1, fn2) 関数が主に非同期データ処理に使用されます。 (さらに詳しく知りたい場合は、PHP 中国語 Web サイトAngularJS 開発マニュアル にアクセスして学習してください)

簡単な小さなケースを例に挙げて説明しましょう:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/lib/AngularJS/angular.min.js"></script>
</head>
<body>
<p class="form" ng-controller="login">
    账号:<input type="text" ng-model="username"><br />
    密码:<input type="text" ng-model="password"><br />
    <button ng-click="loginFn()">登录</button>
</p>
<script>
    var app = angular.module("myApp", []);

    app.controller("login", ["$scope", "$http",
        function($scope, $http) {

            $scope.loginFn = function() {
                // 实现登录
                $http({
                    method:"GET",
                    url:"服务器地址",
                    params:{status:"login",userID:$scope.username, password:$scope.password}
                    /*
                    如果是get请求,请使用params来传递参数
                    如果是Post请求,请使用data来尝试传递参数
                     */
                }).then(
                    function success(resp) {
                        console.log("请求成功", resp);
                        if(resp.data) {
                            console.log("登录成功,跳转到首页");
                        } else {
                            console.log("登录失败");
                        }
                    },
                    function error(resp){
                        console.log("请求失败");
                    }
                );
            }
    }]);
</script>
</body>
</html>


シンプルなログイン機能ページ。 皆さんのお役に立てれば幸いです〜

この記事はここで終わります (さらに詳しく知りたい場合は、PHP 中国語 Web サイト AngularJS ユーザー マニュアル にアクセスして学習してください)。ご質問がある場合は、以下にメッセージを残してください。

以上がAngularJS 組み込みサービス $http を使用するにはどうすればよいですか? angularjs$httpの使用例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。