Skip to main content
 首页 » 编程设计

AngularJS Http

2022年07月19日30lhb25

1.  $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据。

2.  使用$http获取json文件的数据,这里遇到了一个超级大坑,不知道是什么原因,以前代码写好后没有效果,然后使用浏览器调试的时候报错,说success不是一个方法,然后我就十分纳闷,觉得很不现实,感觉不会报这样的错,于是在网上找答案,找了半天没有找到,然后我就试着引用了网上面的AngularJS库,发现可以正常显示,我发现往上面的AngularJS库的版本跟我的不一样,我是最新的1.6版本的,然后我又一次的在网上搜索,发现别人也有这样的问题,于是我就知道了这个原因是AngularJS库的问题,不是我代码写得有问题,所以大家要是跟我写一样的代码的话,最好还是不要只用1.6版本的AngularJS库。

{ 
    "sites": [ 
        { 
            "Name": "菜鸟教程", 
            "Url": "www.runoob.com", 
            "Country": "CN" 
        }, 
        { 
            "Name": "Google", 
            "Url": "www.google.com", 
            "Country": "USA" 
        }, 
        { 
            "Name": "Facebook", 
            "Url": "www.facebook.com", 
            "Country": "USA" 
        }, 
        { 
            "Name": "微博", 
            "Url": "www.weibo.com", 
            "Country": "CN" 
        } 
    ] 
}
<!DOCTYPE html> 
<html> 
    <head> 
        <meta charset="UTF-8"> 
        <title></title> 
        <script type="text/javascript" src="js/angular-1.3.15.min.js"></script> 
    </head> 
    <body> 
        <div ng-app="myApp" ng-controller="myCtrl"><!--AngularJS应用程序由ng-app定义,在这个div内运行--> 
            <ul> 
                <li ng-repeat="x in names"> 
                    {{x.Name + ", " +x.Country}} 
                </li> 
            </ul> 
        </div> 
     
        <script> 
            var app = angular.module("myApp", []); 
            app.controller('myCtrl', function($scope,$http) { /*myCtrl是一个JavaScript函数*/ 
                $http({ 
                    url:'file/sites.json', 
                    method:'GET', 
                    dataType:'json' 
                }).success(function(data){ 
                    $scope.names = data.sites; 
                }).error(function(){ 
                    alert('请就失败!'); 
                }); 
            }); 
        </script> 
    </body> 
</html>


本文参考链接:https://www.cnblogs.com/wgl1995/p/6265209.html