Detaillierte Erläuterung der AngularJS Ajax-Beispiele-js-Tutorial-php.cn

Detaillierte Erläuterung der AngularJS Ajax-Beispiele

怪我咯

Freigeben： 2017-06-27 11:51:19

Original

1296 Leute haben es durchsucht

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

Nach dem Login kopieren

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%"
}
]

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!