suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der AngularJS Ajax-Beispiele

Detaillierte Erläuterung der AngularJS Ajax-Beispiele

怪我咯
怪我咯Original
2017-06-27 11:51:191343Durchsuche

In diesem Artikel werden hauptsächlich die Kenntnisse von AngularJS Ajax erläutert, um Freunden, die AngularJS lernen möchten, zu helfen.

AngularJS bietet $http control kann als Dienst Daten vom Server lesen. 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

[
{
"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.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>
<p 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>
</p>
<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:

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der AngularJS Ajax-Beispiele. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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 ng-options-Direktive von AngularJSNächster Artikel：Detaillierte Erläuterung der ng-options-Direktive von AngularJS

In Verbindung stehende Artikel

Mehr sehen