AngularJS教程中与服务器(Ajax)交互操作的示例[附带完整的演示源代码下载]

本文描述了AngularJS和服务器之间的Ajax交互。分享给大家参考，如下：

AngularJS通过Ajax向Web服务器请求资源，所有操作都封装在$http服务中。$http service是一个只能接收一个参数的函数。这个参数是一个用来完成HTTP请求的一些配置的对象，函数返回一个对象有两种方法：成功和错误。

用法如下：

$ http ({method:' post '，url3360' loginaction.do'})。成功(函数(数据、状态、头、配置){//正常响应回调})。错误(函数(数据、状态、头、配置){//错误响应回调。如果状态代码介于200和299之间，则响应将被视为成功，并将调用成功方法。第一个参数数据是服务器返回的数据，状态是响应状态码。后两个参数不常用，这里不再介绍。感兴趣的朋友请参考AngularJs API文档。

此外，$http服务提供了一些快捷方式，简化了复杂的配置，只需要提供URL即可。例如，对于post请求，我们可以这样写：

$ http.post ('login.do ')。成功(函数(数据、状态、头、配置){//正常响应回调})。错误(函数(数据、状态、头、配置){//错误响应回调})；我们来看一个案例：

！DOCTYPE html html ng-app=' serverMod ' head lang=' en ' meta charset=' UTF-8 '脚本类型=' text/JavaScript ' src=' http : angular-1 . 3 . 0 . 14/angular . js '/脚本title tutori l09/title/head dy ng-controller=' ServerController ' ng-init=' init()' pname : { { name } }/ppage : { { age } }/Pbutton ngservermod . controller(' ServerController '，function($scope，$log，$ http){ $ scope . init=function(){ $ log . info(' init functionn ')；} $ scope . Getinfo=function(){ $ http . get(' JSON/person . JSON ')。成功(功能(数据，状态){警报(状态)；$ scope . name=data . name；$ scope . age=data . age；});} });/script/html点击“请求”按钮，我们通过$http服务的方式向服务器请求数据。服务器响应数据的格式通常是一段Json。这里我们用一个文本文件代替。person.json的内容如下：

由{'name' :' rongbo _ j '，' age' :' 23'}返回的数据将被放入data参数中，我们可以得到服务器响应的内容并在视图中显示数据。

单击此处下载完整的演示示例代码。

希望本文对AngularJS编程有所帮助。