Comment utiliser AJAX dans AngularJS_AngularJS-js tutoriel-php.cn

Comment utiliser AJAX dans AngularJS_AngularJS

WBOY

Libérer： 2016-05-16 15:54:36

original

1339 Les gens l'ont consulté

AngularJS fournit un contrôle $http, qui peut lire les données du serveur en tant que service. Le serveur peut effectuer un appel à la base de données pour obtenir les enregistrements. AngularJS nécessite des données au format JSON. Une fois les données prêtes, $http peut être utilisé pour obtenir les données du serveur de la manière suivante.

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

Copier après la connexion

Ici, le dossier étudiant contenu dans data.txt. Le service $http effectue des appels Ajax et définit des propriétés spécifiques à ses étudiants. Le modèle « étudiant » peut être utilisé pour dessiner des tableaux HTML.
Exemple
data.txt

Copier le code Le code est le suivant :

[

{

"Nom" : "Mahesh Parashar",

"RollNo" : 101,

"Pourcentage" : "80%"

},

{

"Nom" : "Dinkar Kad",

"RollNo" : 201,

"Pourcentage" : "70%"

},

{

"Nom" : "Robert",

"RollNo" : 191,

"Pourcentage" : "75%"

},

{

"Nom" : "Julian Joe",

"RollNo" : 111,

"Pourcentage" : "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>

Copier après la connexion

Sortie

Pour exécuter cet exemple, vous devez déployer textAngularJS.html, data.txt sur un serveur Web. Ouvrez textAngularJS.html dans un navigateur Web en utilisant l'URL pour demander au serveur. Voir les résultats comme suit :

2015617102629588.jpg (560×399)