AngularJS AJAX - $http

$http, AngularJS'nin uzaktan sunuculardan veri okumak için kullanılan bir hizmetidir.

AngularJS $http

AngularJS $http Hizmet sunucuya istek gönderir ve yanıt döner.

Example

Sunucuya basit bir istek gönderin ve başlıkta sonuçları gösterin:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Bugünkü hoş geldiniz mesajı:</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>

Kişisel olarak deneyin

yöntemi

Yukarıdaki örnekte $http hizmeti .get Yöntem.

.get yöntemi, $http hizmetinin hızlı yollarından biridir. Aşağıdaki hızlı yollar bulunmaktadır:

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

Yukarıdaki yöntemler, $http hizmetini çağırmak için hızlı yollar olup:

Example

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

Kişisel olarak deneyin

Yukarıdaki örnek, $http hizmetini çalıştırmak için bir nesne olarak parametre olarak kullanılmıştır. Bu nesne HTTP yöntemi, URL, başarılı olduğunda çalıştırılacak işlemler ve başarısız olduğunda çalıştırılacak işlemleri belirtir.

Özellik

Sunucudan gelen yanıt, aşağıdaki özelliklere sahip bir nesnedir:

  • .config İstek oluşturmak için kullanılan nesne
  • .data Sunucudan gelen yanıtı taşıyan bir dizgi veya nesne
  • .headers The function used to get header information
  • .status Define the number of HTTP status
  • .statusText Define the string of HTTP status

Example

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;
  });
});

Kişisel olarak deneyin

To handle errors, please send to .then Add a function to the method:

Example

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";
  });
});

Kişisel olarak deneyin

JSON

The data obtained from the response should be in JSON format.

JSON is an excellent way to transmit data and is easy to use in AngularJS or any other JavaScript.

For example, we have a file on the server that returns a JSON object containing 15 customers, all wrapped in a named records in the array.

Please click here to view the JSON object.

Example

The ng-repeat directive is perfect for looping through an array:

<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
  <li ng-repeat="x in myData">
    {{ x.Ad == ', ' + 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>

Kişisel olarak deneyin

Uygulama Açıklaması:

uygulama tanımlar customersCtrl kontrolör, kapsam ve http nesnesidir.

$http bir XMLHttpRequest nesnesidış veri talepleri için kullanılır.

$http.get() https://www.codew3c.com/angular/customers.php adresinden okunur JSON Verileri.

Başarıyla, kontrolör, kapsamda bir özellik oluşturur myDatatarafından sunulan JSON verileri içerir.