AngularJS AJAX - $http

$http là một dịch vụ của AngularJS, được sử dụng để đọc dữ liệu từ máy chủ từ xa.

AngularJS $http

AngularJS $http Dịch vụ gửi yêu cầu đến máy chủ và trả về phản hồi.

Mẫu

Gửi một yêu cầu đơn giản đến máy chủ và hiển thị kết quả trong tiêu đề:

<div ng-app="myApp" ng-controller="myCtrl">
<p>Thông điệp chào mừng ngày hôm nay là:</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>

Thử trực tiếp

phương thức

Ví dụ trên sử dụng $http dịch vụ .get Phương thức.

Cách .get là cách gọi nhanh dịch vụ $http. Có các cách gọi nhanh sau:

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

Cách trên đều là cách gọi nhanh dịch vụ $http:

Mẫu

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

Thử trực tiếp

Ví dụ trên sử dụng một đối tượng làm tham số để thực thi dịch vụ $http. Đối tượng này xác định phương thức HTTP, URL, hành động được thực thi khi thành công và hành động được thực thi khi thất bại.

Thuộc tính

Phản hồi từ máy chủ là đối tượng có các thuộc tính sau:

  • .config Đối tượng được sử dụng để tạo yêu cầu
  • .data Chuỗi hoặc đối tượng mang theo phản hồi từ máy chủ
  • .headers Hàm để lấy thông tin tiêu đề
  • .status Định nghĩa số trạng thái HTTP
  • .statusText Định nghĩa chuỗi trạng thái HTTP

Mẫu

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

Thử trực tiếp

Để xử lý lỗi, hãy gửi .then Cách thêm một hàm:

Mẫu

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

Thử trực tiếp

JSON

Dữ liệu từ phản hồi nên có định dạng JSON.

JSON là cách tuyệt vời để truyền dữ liệu và rất dễ sử dụng trong AngularJS hoặc bất kỳ JavaScript nào khác.

Ví dụ: Chúng tôi có một tệp trên máy chủ, tệp này trả về một đối tượng JSON chứa 15 khách hàng, tất cả đều được bao bọc trong một tên records trong mảng.

Vui lòng nhấp vào đây để xem đối tượng JSON.

Mẫu

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.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>

Thử trực tiếp

Mô tả ứng dụng:

Ứng dụng này định nghĩa customersCtrl ký tự điều khiển phạm vi và http đối tượng.

$http là một Đối tượng XMLHttpRequest, được sử dụng để yêu cầu dữ liệu bên ngoài.

$http.get() Đọc từ https://www.codew3c.com/angular/customers.php Dữ liệu JSON.

Sau khi thành công, bộ điều khiển tạo một thuộc tính trong phạm vi myDatamà chứa dữ liệu JSON từ máy chủ.