Comment utiliser le service intégré $http d'AngularJS ? Exemples d'utilisation de angulairejs$http-js tutoriel-php.cn

Comment utiliser le service intégré $http d'AngularJS ? Exemples d'utilisation de angulairejs$http

寻∝梦

Libérer： 2018-09-08 14:54:36

original

1500 Les gens l'ont consulté

Cet article présente en détail le service intégré $http de angularjs. Quelle est la syntaxe de $http dans angulairejs, comment l'utiliser et le code complet se trouve dans l'article. Jetons un coup d'œil à cet article maintenant

Le service intégré AngularJS $http

AngularJS nous offre beaucoup de choses Grâce à ces services intégrés, vous pouvez traiter rapidement et automatiquement certains processus de fonctions métier, tels que :

$window : permet d'injecter l'objet window JS natif 🎜>

$document : est utilisé pour injecter en JS natif >documentObjet Document

$timeout : est utilisé pour injecter l'encapsulation. setTimeout() processus de traitement des fonctions dans le JS

$interval : utilisé pour injecter du setInterval() >Traitement des fonctions

$location : est utilisé pour injecter location en JS natif L'objet est pratique pour des opérations telles que URLadresse etc.

$http:Pour injecter des opérations Ajax encapsulées pour les requêtes de données asynchrones, etc.

Aujourd'hui, nous expliquerons principalement $http dans le service intégré d'AngularJS.

$http:

$http Le service est l'un des services de base de AngularJS. Ce service encapsule principalement l'objet XMLHttpRequest et le JSONP<.>Mode d'accès aux données pour compléter les demandes de données pour les services à distance !

Structure de syntaxe conventionnelle :

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

Copier après la connexion

Afin de permettre aux développeurs de traiter rapidement les demandes de données asynchrones, AngularJS fournit une série de fonctions de raccourci pour faciliter le développement, principalement comme suit Fonction :

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

En fait, le raccourci encapsule simplement le service http

$ Lors du développement de projets réguliers, le raccourci le plus couramment utilisé est L'original construit. -in service $http's $http({}).then(fn1, fn2) effectue un traitement de données asynchrone. (Si vous souhaitez en savoir plus, rendez-vous sur le site PHP chinois Manuel de développement AngularJS pour apprendre)

Prenons un petit cas simple pour démontrer :

<!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>

Copier après la connexion

Une simple page de fonction de connexion. J'espère que cela aidera tout le monde~

Cet article se termine ici (si vous voulez en voir plus, rendez-vous sur le site Web PHP chinois Manuel d'utilisation d'AngularJS pour en savoir plus. Si vous avez des questions, vous pouvez laisser un message ci-dessous.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!