AngularJS AJAX - $ http
$http là một dịch vụ AngularJS để đọc dữ liệu từ các máy chủ từ xa.
AngularJS $ http
Dịch vụ AngularJS $http
đưa ra yêu cầu tới máy chủ và trả về phản hồi.
Ví dụ
Thực hiện một yêu cầu đơn giản tới máy chủ và hiển thị kết quả trong tiêu đề:
<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>
Hãy tự mình thử »phương pháp
Ví dụ trên sử dụng phương thức .get
của dịch vụ $http
.
Phương thức .get là phương thức rút gọn của dịch vụ $http. Có một số phương pháp tắt:
-
.delete()
-
.get()
-
.head()
-
.jsonp()
-
.patch()
-
.post()
-
.put()
Các phương thức trên đều là lối tắt để gọi dịch vụ $https:
Ví dụ
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;
});
});
Hãy tự mình thử »Ví dụ trên thực thi dịch vụ $http với một đối tượng làm đối số. Đối tượng đang chỉ định phương thức HTTP, url, những việc cần làm khi thành công và những việc cần làm khi thất bại.
Của cải
Phản hồi từ máy chủ là một đố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
một chuỗi hoặc một đối tượng mang phản hồi từ máy chủ. -
.headers
là một hàm được sử dụng để lấy thông tin tiêu đề. -
.status
một số xác định trạng thái HTTP. -
.statusText
một chuỗi xác định trạng thái HTTP.
Ví dụ
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;
});
});
Hãy tự mình thử » Để xử lý lỗi, hãy thêm một hàm nữa vào phương thức .then
:
Ví dụ
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";
});
});
Hãy tự mình thử »JSON
Dữ liệu bạn nhận được từ phản hồi dự kiến sẽ ở định dạng JSON.
JSON là một cách tuyệt vời để truyền dữ liệu và dễ sử dụng trong AngularJS hoặc bất kỳ JavaScript nào khác.
Ví dụ: Trên máy chủ, chúng tôi có một tệp trả về một đối tượng JSON chứa 15 khách hàng, tất cả được gói trong mảng có tên là records
.
Nhấp vào đây để xem đối tượng JSON.
Ví dụ
Lệnh ng-repeat
hoàn hảo để lặp qua một mảng:
<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>
Hãy tự mình thử »Ứng dụng giải thích:
Ứng dụng xác định bộ điều khiển customersCtrl
, với đối tượng $scope
và $http
.
$http
là một đối tượng XMLHttpRequest để yêu cầu dữ liệu bên ngoài.
$http.get()
đọc dữ liệu JSON từ https://www.example.com.vn/angular/customers.php .
Nếu thành công, bộ điều khiển sẽ tạo một thuộc tính myData
trong phạm vi với dữ liệu JSON từ máy chủ.