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 cara cepat untuk layanan $http. Ada beberapa cara cepat lainnya:

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

Metode di atas adalah cara cepat 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 akan dilakukan saat sukses, dan operasi yang akan dilakukan 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 tajuk
  • .status Mendefinikan angka status HTTP
  • .statusText Mendefinikan 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, silakan arahkan ke .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 terjadi";
  });
});

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 ada berkas di pelayan, berkas ini mengembalikan objek JSON yang mengandung 15 pelanggan, semua di wadah dengan nama rekod di dalam array.

Sila klik di sini untuk lihat objek JSON.

Contoh

Arahan ng-repeat adalah sangat sesuai untuk mengulangi 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 menentukan customersCtrl pengawal, yang mempunyai scope dan http objek.

$http adalah Objek XMLHttpRequest, untuk permintaan data luaran.

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

Kemudian, pengawal dicipta dalam kawasan selesai myDatadi mana termasuk data JSON dari pelayan.