suchen

Heim >Web-Frontend >js-Tutorial >So verwenden Sie AJAX in AngularJS_AngularJS

So verwenden Sie AJAX in AngularJS_AngularJS

WBOY
WBOYOriginal
2016-05-16 15:54:361322Durchsuche

AngularJS bietet eine $http-Steuerung, die als Dienst Daten vom Server lesen kann. Der Server kann einen Datenbankaufruf durchführen, um die Datensätze abzurufen. AngularJS erfordert Daten im JSON-Format. Sobald die Daten bereit sind, kann $http verwendet werden, um die Daten auf folgende Weise vom Server abzurufen. 

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

Hier der in data.txt enthaltene Studentendatensatz. Der $http-Dienst führt Ajax-Aufrufe durch und legt für seine Schüler spezifische Eigenschaften fest. Das „Student“-Modell kann zum Zeichnen von HTML-Tabellen verwendet werden.
Beispiel
data.txt

Code kopieren Der Code lautet wie folgt:
[
{
„Name“: „Mahesh Parashar“,
„RollNo“ : 101,
„Prozentsatz“: „80 %“
},
{
„Name“: „Dinkar Kad“,
„RollNo“ : 201,
„Prozentsatz“: „70 %“
},
{
„Name“: „Robert“,
"RollNo" : 191,
„Prozentsatz“: „75 %“
},
{
„Name“: „Julian Joe“,
"RollNo" : 111,
„Prozentsatz“: „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>

Ausgabe

Um dieses Beispiel auszuführen, müssen Sie textAngularJS.html und data.txt auf einem Webserver bereitstellen. Öffnen Sie textAngularJS.html in einem Webbrowser und verwenden Sie die URL, um den Server anzufordern. Sehen Sie sich die Ergebnisse wie folgt an:

2015617102629588.jpg (560×399)

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Detaillierte Erläuterung der Tabellenverwendung in AngularJS_AngularJSNächster Artikel：Detaillierte Erläuterung der Tabellenverwendung in AngularJS_AngularJS

In Verbindung stehende Artikel

Mehr sehen