En son web geliştirme öğreticiler
 

AngularJS AJAX - $ http

❮ Önceki Sonraki Bölüm ❯

$ http uzak sunuculardan veri okumak için bir angularjs hizmettir.

Angularjs $ http

Angularjs $http hizmet sunucusuna istekte ve bir yanıt verir.

Örnek

Sunucuya basit istekte bulunun ve bir başlık sonucu görüntülemek:

<div ng-app="myApp" ng-controller="myCtrl">

<p>Today's welcome message is:</p>
<h1>{{myWelcome}}</h1>

</div>

<script>
var app = angular. module('myApp', []) ;
app. controller('myCtrl', function($scope, $http) {
    $http. get("welcome.htm")
    . then(function(response) {
        $scope.myWelcome = response.data;
    });
});
</script>
Kendin dene "

Yöntemler

Yukarıdaki örnekte kullandığı .get yöntemini $http hizmeti.

.get yöntemi $ http hizmetinin kısayol yöntemidir. Birkaç kısayol yöntem vardır:

  • . delete()
  • . get()
  • . head()
  • . jsonp()
  • . patch()
  • . post()
  • . put()

yöntemler yukarıdaki $ http servisini arayarak tüm kısayollar şunlardır:

Örnek

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http({
        method : "GET",
        url : "welcome.htm"
    }).then(function mySucces(response) {
        $scope.myWelcome = response.data;
    }, function myError(response) {
        $scope.myWelcome = response.statusText;
    });
});
Kendin dene "

Yukarıdaki örnekte, bir bağımsız değişken olarak bir nesne ile $ http servisi gerçekleştirir. Nesne başarısına yapmak ve başarısızlık ne ne yapacağını HTTP yöntemi, url, belirtme.

Özellikleri

sunucudan cevap bu özelliklere sahip bir amacıdır:

  • .config isteği oluşturmak için kullanılan bir nesne.
  • .data bir dize veya sunucudan yanıtını taşıyan bir amacı,.
  • .headers başlık bilgilerini almak için kullanmak için bir işlev.
  • .status HTTP durumunu tanımlayan bir sayı.
  • .statusText HTTP durumunu tanımlayan bir dize.

Örnek

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("welcome.htm")
    .then(function(response) {
        $scope.content = response.data;
        $scope.statuscode = response.status;
        $scope.statustext = response.statustext;
    });
});
Kendin dene "

Bir tane daha fonksiyonlar eklemek, hataları işlemek için .then yöntemle:

Örnek

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
    $http.get("wrongfilename.htm")
    .then(function(response) {
        //First function handles success
        $scope.content = response.data;
    }, function(response) {
        //Second function handles error
        $scope.content = "Something went wrong";
    });
});
Kendin dene "

JSON

Eğer yanıt aldığım verileri JSON biçiminde olması bekleniyor.

JSON veri taşıma harika bir yoldur ve angularjs içinde kullanımı kolay, ya da başka herhangi JavaScript'tir.

Örnek: sunucuda biz 15 müşteriye içeren bir JSON nesnesi, tüm dizi denilen sarılmış döndüren bir dosya var records .

JSON nesnesi bir göz atın.

x

customers.php 

 {{Veri | json}}

Örnek

ng-repeat yönergesi bir dizi döngü için idealdir:

<div ng-app="myApp" ng-controller="customersCtrl">

<ul>
  <li ng-repeat="x in myData">
    {{ x.Name + ', ' + x.Country }}
  </li>
</ul>

</div>

<script>
var app = angular. module('myApp', []) ;
app. controller('customersCtrl', function($scope, $http) {
    $http. get("customers.php") . then(function(response) {
        $scope.myData = response.data.records;
    });
});
</script>
Kendin dene "

Uygulama açıkladı:

Uygulama tanımlayan customersCtrl a, kontrolör $scope ve $http nesne.

$http harici verilerini istemek için bir XMLHttpRequest nesnesidir.

$http. get() $http. get() den JSON verilerini okur http://www.w3ii.com/angular/customers.php .

Başarı durumunda denetleyici bir özellik oluşturur myData sunucudan JSON verilerle kapsamında,.


❮ Önceki Sonraki Bölüm ❯