Maison > Article > interface Web > Contenu du service $http dans AngularJS

Contenu du service $http dans AngularJS

一个新手original: 2017-09-22 09:22:151114parcourir

Utilisez la méthode de raccourci $http pour interagir avec le serveur
Dans AngularJS, l'interaction entre la page et le serveur passe principalement par l'appel de modules.
Selon le type de requête, le module $http propose différentes méthodes d'appel. Son format général est le suivant.

Explication du paramètre :
url : Représente un chemin de requête de serveur relatif ou absolu
Type de requête : inclut Il y a ; six méthodes de requête courantes : POST, GET, JSONP, DELETE, PUT et HEAD. Parmi elles, les requêtes de type POST et PUT peuvent envoyer des données via le paramètre facultatif data, et les données transmises lors de la requête peuvent également être définies via le paramètre facultatif. configuration.

Lorsque la requête $http réussit, vous pouvez obtenir les données et informations associées renvoyées par le serveur dans la méthode de réussite du rappel.
data : indique le corps de retour du paramètre, généralement l'ensemble de résultats renvoyé par la requête.
statut : Indique la valeur de statut renvoyée après la requête.
headers : Représente le fichier d'en-tête renvoyé après la requête, utilisé pour afficher les informations d'en-tête de la requête renvoyée.
config : est un objet à travers lequel les informations complètes de configuration lors de l'envoi d'une requête HTTP peuvent être obtenues.

Utilisez l'objet de configuration $http pour interagir avec le serveur
Ci-dessus, nous avons présenté le processus d'utilisation du raccourci /$http pour interagir avec le serveur. Bien que cette méthode soit simple, elle manque de flexibilité dans la configuration et nécessite beaucoup de code. En réponse à cette situation, nous pouvons utiliser le modèle de service $http comme fonction, traiter tous les éléments de configuration qui construisent l'objet XHR comme un objet et définir l'objet comme paramètre formel de la fonction lors de l'appel, il suffit de le modifier. la valeur de chaque attribut est suffisante. Le format d'appel spécifique est le suivant.

$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请求的时间，单位是毫秒。})

Par exemple :
Description de l'exigence :
Ajoutez un bouton de zone de texte à la page. , lorsque l'utilisateur saisit un numéro dans la zone de texte et clique sur le bouton, la fonction $http est appelée pour envoyer une requête HTTP au serveur, vérifier la parité du numéro et afficher le résultat de la vérification dans l'élément de page.

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

Analyse :
Dans le code js de cet exemple, lorsque l'utilisateur clique sur le bouton, la méthode onclick de la liaison du bouton est déclenchée. Dans cette méthode, $. est appelé service http et transmet les paramètres à la fonction sous la forme d'objets de configuration, tels que la méthode, l'URL et d'autres valeurs d'attribut
Étant donné que la requête GET est utilisée, la valeur dans la zone de texte est transmise sous la forme de. clé/valeur via l'attribut params au serveur.
Dans cet exemple, le contenu final de l'URL demandée est
htpp://localhost/Ch7/data/chk.php?n=87, où n est le nom de la clé et 87 est la valeur de la clé, ce qui est la zone de texte dans laquelle le numéro est entré.

Lorsque la fonction /$http envoie une requête HTTP, vous pouvez obtenir le contenu des données et d'autres informations d'en-tête renvoyées par le serveur via la méthode success. Par exemple, les données sont les données renvoyées, qui sont le nombre saisi. par l'utilisateur dans la zone de texte.

Dans Angular, après avoir exécuté la fonction /$http, son contenu de retour est en fait un objet de promesse. Par conséquent, vous pouvez appeler directement la méthode then via l'écriture en chaîne pour obtenir les données de réussite et d'exception.

Les deux morceaux de code suivants ont la même fonction.

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

est équivalent à

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

fn1 et fn2 représentent respectivement les fonctions de retour du succès et de l'erreur de la demande.
Bien que les fonctions des deux soient les mêmes. Cependant, l'utilisation de la méthode then peut recevoir l'objet de réponse complet du serveur, tandis que les méthodes de réussite et d'erreur ne reçoivent que l'objet de réponse analysé et traité, ce qui signifie que l'objet de retour obtenu par la méthode then est plus original et complet.

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!

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 implémenter des couleurs aléatoires à l'aide de JavaScriptArticle suivant：Comment implémenter des couleurs aléatoires à l'aide de JavaScript

Articles Liés

Voir plus