AngularJS - Ajax
AngularJS cung cấp điều khiển $ http hoạt động như một dịch vụ để đọc dữ liệu từ máy chủ. Máy chủ thực hiện cuộc gọi cơ sở dữ liệu để lấy các bản ghi mong muốn. AngularJS cần dữ liệu ở định dạng JSON. Khi dữ liệu đã sẵn sàng, $ http có thể được sử dụng để lấy dữ liệu từ máy chủ theo cách sau:
function studentController($scope,$https:) {
var url = "data.txt";
$https:.get(url).success( function(response) {
$scope.students = response;
});
}Tại đây, tệp data.txt chứa hồ sơ học sinh. Dịch vụ $ http thực hiện một cuộc gọi ajax và đặt phản hồi cho các sinh viên thuộc tính của nó. Mô hình học sinh có thể được sử dụng để vẽ bảng trong HTML.
Ví dụ
data.txt
[
{
"Name" : "Mahesh Parashar",
"RollNo" : 101,
"Percentage" : "80%"
},
{
"Name" : "Dinkar Kad",
"RollNo" : 201,
"Percentage" : "70%"
},
{
"Name" : "Robert",
"RollNo" : 191,
"Percentage" : "75%"
},
{
"Name" : "Julian Joe",
"RollNo" : 111,
"Percentage" : "77%"
}
]testAngularJS.htm
<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f2f2f2;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app = "" ng-controller = "studentController">
<table>
<tr>
<th>Name</th>
<th>Roll No</th>
<th>Percentage</th>
</tr>
<tr ng-repeat = "student in students">
<td>{{ student.Name }}</td>
<td>{{ student.RollNo }}</td>
<td>{{ student.Percentage }}</td>
</tr>
</table>
</div>
<script>
function studentController($scope,$http) {
var url = "/data.txt";
$http.get(url).then( function(response) {
$scope.students = response.data;
});
}
</script>
<script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
</body>
</html>Đầu ra
Để thực thi ví dụ này, bạn cần triển khai tệp testAngularJS.htm và data.txt tới một máy chủ web. Mở tệp kiểm traAngularJS.htm bằng URL của máy chủ của bạn trong trình duyệt web và xem kết quả.