AngularJS AJAX - $http

$http adalah layanan AngularJS yang digunakan untuk membaca data dari server jauh.

AngularJS $http

AngularJS $http Layanan mengirim permintaan ke server dan mengembalikan tanggapan.

Contoh

Mengirim permintaan sederhana ke server dan menampilkan hasilnya di judul:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Pesan selamat datang hari ini adalah:</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>

Coba Sendiri

metode

Contoh di atas menggunakan $http layanan .get Metode.

Metode .get adalah jalan singkat untuk layanan $http. Ada beberapa jalan singkat lainnya:

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

Metode di atas adalah jalan singkat untuk memanggil layanan $http:

Contoh

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

Coba Sendiri

Contoh di atas menggunakan objek sebagai parameter untuk melaksanakan layanan $http. Objek ini menentukan metode HTTP, URL, operasi yang dijalankan saat sukses, dan operasi yang dijalankan saat gagal.

Properti

Tanggapan dari server adalah objek yang memiliki properti berikut:

  • .config Objek untuk mengenerate permintaan
  • .data String atau objek, membawa tanggapan dari server
  • .headers Fungsi untuk mendapatkan informasi header
  • .status Definisi angka status HTTP
  • .statusText Definisi string status HTTP

Contoh

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

Coba Sendiri

Untuk menangani kesalahan, arahkan .then Metode menambahkan fungsi:

Contoh

var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("wrongfilename.htm")
  .then(function(response) {
    // Fungsi pertama menangani kesuksesan
    $scope.content = response.data;
  }, function(response) {
    // Fungsi kedua menangani kesalahan
    $scope.content = "Ada yang salah";
  });
});

Coba Sendiri

JSON

Data yang didapatkan dari tanggapan harus berformat JSON.

JSON adalah cara yang sempurna untuk mengirimkan data, dan mudah digunakan di AngularJS atau JavaScript lainnya.

Contoh: kami memiliki berkas di server, berkas ini mengembalikan objek JSON yang mengandung 15 klien, semua ini di wrap dalam nama catatan di dalam array.

Klik di sini untuk melihat objek JSON.

Contoh

Instruksi ng-repeat adalah sempurna untuk mengulang melalui array:

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

Coba Sendiri

Keterangan Aplikasi:

aplikasi ini mendefinisikan customersCtrl kontroler, dengan scope dan http objek.

$http adalah Objek XMLHttpRequest, digunakan untuk meminta data eksternal.

$http.get() Dibaca dari https://www.codew3c.com/angular/customers.php Data JSON.

Setelah sukses, kontroler membuat atribut dalam scope myDatayang termasuk data JSON dari server.