angularJS之$http：與服務器交互示例

第angularJS之$http：與服務器交互示例$http是angular中的一個核心服務，利用瀏覽器的xmlhttprequest或者viaJSONP對象與遠程HTTP服務器進行交互。

$http的使用方式和jquery提供的$.ajax操作比較相同，均支持多種method的請求，get、post、put、delete等。

$http的各種方式的請求更趨近于rest風格。

在controller中可通過與$scope同樣的方式獲取$http對象,e.g.functioncontroller($scope,$http){}

下面進行$http服務的使用說明，調用如下：

復制代碼代碼如下:

$http(config).success(function(data,status,headers,config){}).error(function(data,status,headers,config){});

1.config為一個JSON對象，其中主要包含該請求的url、data、method等，如{url:"login.do",method:"post",data:{name:"12346",pwd:"123"}}。

method{String}請求方式e.g."GET"."POST"

url{String}請求的URL地址

params{key,value}請求參數，將在URL上被拼接成？key=value

data{key,value}數據，將被放入請求內發(fā)送至服務器

cache{boolean}若為true，在httpGET請求時采用默認的$httpcache，否則使用$cacheFactory的實例

timeout{number}設置超時時間

2、success為請求成功后的回調函數，error為請求失敗后的回調函數，這里主要是對返回的四個參數進行說明。

data響應體

status相應的狀態(tài)值

headers獲取getter的函數

config請求中的config對象，同上第1點

為了方便大家與HTTP服務器進行交互，angularJS提供了各個請求方式下方法。

$http.put/post(url,data,config)url、name必填，config可選

$http.get/delete/jsonp/head(url,confid)url必填，config可選

url、data、config與$http的參數一致,

下面有一個simpledemo用于展示如何使用$http()及$http.post()。

!DOCTYPEHTML

htmllang="zh-cn"

head

metacharset="UTF-8"

titleCSSClasses/title

scriptsrc="angular.min.js"type="text/javascript"/script

scripttype="text/javascript"

functionctrl($http,$scope){

$scope.login=function(user){

$http.post("login.do",user).success(function(data,status,headers,config){

alert("success");

}).error(function(data,status,headers,config){

alert("error");

$scope.login1=function(user){

$http({url:"login.do",data:user}).success(function(data,status,headers,config){

alert("success");

}).error(function(data,status,headers,config){

alert("error");

/script

/head

bodyng-app

divng-controller="ctrl"

formname="loginFm"

Name:inputng-model=""/

pwd:inputng-model="user.pwd"/

inputtype="button"value="login"ng-click="login(user)"/

inputtype="button"value="logi