Bagaimana untuk menggunakan AJAX dalam AngularJS

Bagaimana untuk menggunakan AJAX dalam AngularJS_AngularJS

WBOY

Lepaskan： 2016-05-16 15:54:36

asal

1339 orang telah melayarinya

AngularJS menyediakan kawalan $http, yang boleh membaca data daripada pelayan sebagai perkhidmatan. Pelayan boleh membuat panggilan pangkalan data untuk mendapatkan rekod. AngularJS memerlukan data dalam format JSON. Setelah data sedia, $http boleh digunakan untuk mendapatkan data daripada pelayan dengan cara berikut.

function studentController($scope,$http) {
var url="data.txt";
  $http.get(url).success( function(response) {
              $scope.students = response; 
            });
}

Salin selepas log masuk

Di sini, rekod pelajar yang terkandung dalam data.txt. Perkhidmatan $http membuat panggilan Ajax dan menetapkan sifat khusus kepada pelajarnya. Model "pelajar" boleh digunakan untuk melukis jadual HTML.
Contoh
data.txt

Salin kod Kod adalah seperti berikut:

[

{

"Nama" : "Mahesh Parashar",

"No Roll" : 101,

"Peratusan" : "80%"

},

{

"Nama" : "Dinkar Kad",

"No Roll" : 201,

"Peratusan" : "70%"

},

{

"Nama" : "Robert",

"No Roll" : 191,

"Peratusan" : "75%"

},

{

"Nama" : "Julian Joe",

"No Roll" : 111,

"Peratusan" : "77%"

}

]

testAngularJS.html

<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).success( function(response) {
              $scope.students = response;
            });
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

Salin selepas log masuk

Output

Untuk menjalankan contoh ini, anda perlu menggunakan textAngularJS.html, data.txt ke pelayan web. Buka textAngularJS.html dalam pelayar web menggunakan URL untuk meminta pelayan. Lihat hasilnya seperti berikut:

2015617102629588.jpg (560×399)