Heim > Artikel > Web-Frontend > Detaillierte Erläuterung der AngularJS Ajax-Beispiele
Detaillierte Erläuterung der AngularJS Ajax-Beispiele
- 怪我咯Original
- 2017-06-27 11:51:191297Durchsuche
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!