AngularJS——5、Http

本文介绍如何使用AngularJS框架中的$http服务从服务器读取JSON数据,并将其展示在网页上。通过一个示例展示了如何配置AngularJS模块,定义控制器,以及如何使用$http.get()方法来获取远程数据。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$http.get(url) 读取服务器数据。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">  
        <script src="//apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>  
    </head>
    <body>
        <div ng-app="xxApp" ng-controller="xxCtrl"> 
            <ol>
                <li ng-repeat="x in names">
                    {{ x.Name + ', ' + x.City + ', ' + x.Country }}
                </li>
            </ol>
        </div>
        <script>
            var app = angular.module('xxApp', []);
            app.controller('xxCtrl', function($scope, $http) {
                $http.get("/xxJSON.php")
                     .success(function (response) {
                         //从服务端引入JSON数据,$scope.names变成一个数组
                         $scope.names = response.records;
                      });
            });
        </script>
    </body>
</html>

xxJSON.php

{"records":[
    {   
        "Name" : "YY",
        "City" : "Beijing",
        "Country" : "China"   
    },
    {
        "Name" : "FF",
        "City" : "Chengdu",
        "Country" : "China"
    },
    {
        "Name" : "LL",
        "City" : "Shanghai",
        "Country" : "China"
    }
]}

输出:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值