angularjs ajax angularjsajax|AngularJS教程

本文概述

AngularJS AJAX示例
HTTP服务方法
属性

AngularJS提供了$ http服务来读取数据和远程服务器。它用于从服务器检索所需的记录。
AngularJS需要JSON格式的数据。数据准备好后，$ http将以以下方式获取数据表单服务器：

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

这里的文件“ data.txt”是员工的记录。 $ http服务会进行AJAX调用，并对其物业员工进行响应。该模型用于绘制HTML中的表格。
AngularJS AJAX示例【angularjs ajax】testAngularJS.htm

< !DOCTYPE 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 = "employeeController">< table> < tr> < th>Name< /th> < th>Age< /th> < th>Salary< /th> < /tr>< tr ng-repeat = "employee in employees"> < td>{{ employee.Name }}< /td> < td>{{ employee.Age }}< /td> < td>{{ employee.Salary }}< /td> < /tr> < /table> < /div>< script> function employeeController($scope, $http) { var url = "data.txt"; $http.get(url).success( function(response) { $scope.employees = response; }); } < /script>< script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">< /script>< /body> < /html>

此处的data.txt文件包含员工的记录。
“ data.txt”（JSON格式的员工数据）

[ { "Name" : "Mahesh Sharma", "Age" : 25, "Salary" : "20000" }, { "Name" : "Rohan Malik", "Age" : 20, "Salary" : "22000" }, { "Name" : "Robert Petro", "Age" : 45, "Salary" : "67000" }, { "Name" : "Jullia Roberts", "Age" : 21, "Salary" : "55000" } ]

要执行以上示例，你必须将testAngularJS.htm和data.txt文件部署到Web服务器。
在网络浏览器中使用服务器的URL打开文件testAngularJS.htm，然后查看结果。
输出：
结果将如下所示：