Maison > Article > interface Web > Comment utiliser le service intégré $http d'AngularJS ? Exemples d'utilisation de angulairejs$http

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

寻∝梦original: 2018-09-08 14:54:361445parcourir

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) {
　　	/* 请求失败时候的操作函数 */
　　}
);

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>

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!

php ajax 封装 delete JS 对象异步 location http

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser les expressions AngularJS ? Explication détaillée de l'utilisation des expressions dans angulairejsArticle suivant：Comment utiliser les expressions AngularJS ? Explication détaillée de l'utilisation des expressions dans angulairejs

Articles Liés

Voir plus