So verwenden Sie AJAX in AngularJS_AngularJS-js-Tutorial-php.cn

So verwenden Sie AJAX in AngularJS_AngularJS

WBOY

Freigeben： 2016-05-16 15:54:36

Original

1281 Leute haben es durchsucht

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

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

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>

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:

2015617102629588.jpg (560×399)