AngularJS http

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

使用格式:

// 简单的 GET 请求,可以改为 POST
$http({
    method: 'GET',
    url: '/someUrl'
        }).then(function successCallback(response) {
//请求成功执行代码
     }, function errorCallback(response) {
// 请求失败执行代码
 });

POST 与 GET 简写方法格式:

$http.get('/someUrl', config).then(successCallback, errorCallback);
$http.post('/someUrl', data, config).then(successCallback, errorCallback);

读取JSON文件

以下是存储在web服务器上的 JSON 文件:Website_JSON.php:

{
    "sites": [
        {
            "Name": "慕课网",
            "Url": "www.imooc.com",
             "Country": "CN"
        },
        {
            "Name": "职业路径",
            "Url": "class.imooc.com",
             "Country": "CN"
        },
        {
            "Name": "实战",
            "Url": "coding.imooc.com",
            "Country": "CN"
        }, 
    ]}

AngularJS $http

AngularJS $http 是一个用于读取web服务器上数据的服务。

$http.get(url) 是用于读取服务器数据的函数。 

通用方法实例

angularjs1.5以上版本:

var app = angular.module('myApp', []);    

app.controller('siteCtrl', function($scope, $http) {
    $http({
        method: 'GET',       
        url: '/try/angularjs/data/sites.php'
    }).then(function successCallback(response) {
            $scope.names = response.data.sites;   
       }, function errorCallback(response) {
            // 请求失败执行代码
    });  
});

运行案例

简写方法实例

angularjs1.5以上版本:

<div ng-app="myApp" ng-controller="siteCtrl"> 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("/try/angularjs/data/sites.php")
  .then(function (response) {$scope.names = response.data.sites;});
});
</script>

运行案例

angularjs1.5以下版本:

<div ng-app="myApp" ng-controller="siteCtrl"> 
<ul>
  <li ng-repeat="x in names">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>
</div>
 <script>var app = angular.module('myApp', []);
app.controller('siteCtrl', function($scope, $http) {
  $http.get("/try/angularjs/data/sites.php")
  .success(function (response) {$scope.names = response.sites;});
});
</script>

运行案例

本内容均来自互联网,仅供参考,如有侵权请及时通知本站予以删除。邮箱:wiki#imooc.com (#改成@)

意见反馈 帮助中心 APP下载
官方微信