zoukankan      html  css  js  c++  java
  • Angular--$http服务

    关于Angular中$http 服务是对XMLHttpRequest 对象的封装,向服务器发送请求;

    下面自己在angular中$http学习的一个记录,

    GET请求(先贴码)

    angualr代码:

    var app = angular.module('app',[]);
        
    
        app.controller('contr',['$scope', '$http', '$window',function($scope, $http, $window){
            $scope.num = "0";
            $scope.result = "偶数";
    
            $scope.chk = function(){
                $http({
                    method: 'POST',
                    url: '/chk.php',
                    params: {
                        num: $scope.num
                    }
                }).success(function(data, status, headers, config){
                    
                    data = angular.fromJson(data);
                    $scope.result = data['type'];
    
                }).error(function(data, status, headers, config){
                    
                    console.log('faild!');
    
                  });
            };
    
        }]);

    PHP代码:

    <?php 
    
    function chk($num){
        return ($num%2) == 0 ? true : false;
    }
    
    //$num = $_POST["num"];
    $num = $_GET["num"];
    
    if (chk($num)){
        echo '{"type": "偶数"}';
    } else {
        echo '{"type": "奇数"}';
    }
    
    ?>
    View Code

    $http方法有俩种写法,第一种是上面的写法,另一种是promise的写法;$http().then(fn({data, status, statusText, headers}), fn2()); 

    针对GET请求,我目前发现$http服务只需要关注三个参数:method, url, params; 根据succuss函数返回data中的具体数据转化,如果是json数据需要使用angular.fromJson()方法进行转化,

    POST请求(先贴码)

    var app = angular.module('app',[]);
        
    
        app.controller('contr',['$scope', '$http', '$window',function($scope, $http, $window){
            $scope.num = "0";
            $scope.result = "偶数";
    
            $scope.chk = function(){
                $http({
                    method: 'POST',
                    url: '/chk.php',
                    data: {
                        num: $scope.num
                    },
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },    
                    transformRequest: function(obj) {    
                        var str = [];    
                        for (var p in obj) {    
                            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));    
                        }    
                        return str.join("&");    
                    } 
                }).success(function(data, status, headers, config){
                    
                    data = angular.fromJson(data);
                    $scope.result = data['type'];
    
                }).error(function(data, status, headers, config){
                    
                    console.log('faild!');
    
                  });
            };
    
        }]);
    View Code

    在使用angular的$http中的POST请求时,需要关注的参数要比GET多:method, url, data, headers, transformRequest;上述参数必须设置,不然后端可能无法获取到(可能我的php知识太菜了,只能写那种简单的获取方式 - -);

    在php代码中我就不重复贴,只是将对应的$_GET["value"]换成 $_POST["value"]即可;

  • 相关阅读:
    jQuery插件开发入门
    [转]JS学习总结-技巧、方法、细节
    JS无法获取display为none的隐藏元素的宽度和高度的解决方案
    vuejs2.0运用原生js实现简单的拖拽元素功能
    HTML5效果:Canvas 实现圆形进度条并显示数字百分比
    git常用命令总结以及用github来展示你的前端页面
    jQuery 对AMD的支持(Require.js中如何使用jQuery)
    vue+springboot上传和下载附件功能
    springboot+vue实现文件上传
    Spring boot+Vue全栈开发---Spring Boot文件上传
  • 原文地址:https://www.cnblogs.com/dream-w/p/6053766.html
Copyright © 2011-2022 走看看