recherche

Maison >interface Web >js tutoriel >Comment utiliser AJAX dans AngularJS_AngularJS

Comment utiliser AJAX dans AngularJS_AngularJS

WBOY
WBOYoriginal
2016-05-16 15:54:361364parcourir

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

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>

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)

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Explication détaillée de l'utilisation des tables dans AngularJS_AngularJSArticle suivant：Explication détaillée de l'utilisation des tables dans AngularJS_AngularJS

Articles Liés

Voir plus