Angular的$http請求方式、Angular的幾種發送請求

$http常用的幾個參數:
$http常用的幾個參數
    $http服務的設置對象:
     1、method 字符串  表示發送的請求類型 get post jsonp等等
     2、url 字符串 絕對或者相對的URL,請求的目標
     3、params 字符串或對象 會被轉化成查詢字符串加到URL後面,如果不是字符串會被JSON序列化
     4、data 字符串或者對象 這個對象包含了被當做消息體發送給服務器的數據,一般在POST請求中使用,並且從angular1.3開始可以在POST請求裏發送二進制數據
       如var blob = new Blob({name:’張三’}); $http({method:’get’,url:’/‘,data:blob});
     5、headers 對象 在我們做POST跨域和後臺配合的時候就用到了headers,其代表隨請求發送的HTTP頭字符串
     6、cache 布爾或緩存對象 如果設置爲true angularjs會用默認的$http緩存對GET請求進行緩存
     7、timout 數值或者promise對象,如果爲數值那麼請求會在指定的毫秒後結束(會跳到失敗的error方法裏) ,如果爲對象那麼promise對象在被resolve時請求會被中止,方法執行完畢再執行請求
     8、xsrfHeaderName 字符串 保存XSFR令牌的HTTP頭的名稱
     9、xsrfCookieName  字符串 保存XSFR令牌的cookie的名稱
     10、transformRequest 函數或函數組 用來對HTTP請求頭和體信息進行轉換,並返回轉化後的版本,通常用於在請求發送給服務器之前對其序列化
     11、transformResponse 函數或函數組 用來HTTP響應頭和響應體信息進行轉換,並返回轉化後的版本,通常用來反序列化
     12、responseType 字符串 該選項會在請求中設置XMLHttpResponseType屬性有以下類型: “”字符串默認,”arraybuffer”(arraybuffer),”blob”(blob對象),“document”(HTTP文檔),”json“(從JSON對象解析出來的json字符串),”text“(字符串),”moz-blob“(Firefox的接收進度事件),”moz-chunked-text“(文本流),”moz-chunked-arraybuffer”(arraybuffer流)

    $http服務的快捷方法
     $http提供了一些快捷方法讓我們使用,一共有六個(其實是六種請求模式)
     1、$http.get(url字符串,config可選的配置-對象類型) 返回HttpPromise對象
     2、$http.delete(url字符串,config可選的配置-對象類型) 返回HttpPromise對象
     3、$http.head(url字符串,config可選的配置-對象類型) 返回HttpPromise對象
     4、$http.jsonp(url字符串,config可選的配置-對象類型) 返回HttpPromise對象
     5、$http.post(url字符串,data對象或字符串,config可選的配置-對象類型) 返回HttpPromise對象
     6、$http.put(url字符串,data對象或字符串,config可選的配置-對象類型) 返回HttpPromise對象
1、$http請求方式
// 1、$http請求方式
    /**
     * 請求參數說明:
     *url:url,           //請求的url路徑
     *method:method,    //GET/DELETE/HEAD/JSONP/POST/PUT
     *params:params ,   //轉爲  ?param1=xx1¶m2=xx2的形式
     *data: data        //包含了將被當做消息體發送給服務器的數據,通常在POST請求時使用
     */

    $http({
        url:url,           //請求的url路徑
        method:method,    //GET/DELETE/HEAD/JSONP/POST/PUT
        params:params ,   //轉爲  ?param1=xx1¶m2=xx2的形式
        data: data        //包含了將被當做消息體發送給服務器的數據,通常在POST請求時使用
    }).success(function(response, status, header, config, statusText){
        //成功處理

        // response     ---  響應體,即:要請求的數據
        // status       ---  HTTP狀態碼
        // header      ---  頭信息
        // config       ---  用來生成原始請求的完整設置對象
        // statusText   ---  相應的HTTP狀態文本

    }).error(function(data,header,config,status){
        //錯誤處理
    });
$http({
         method: 'DELETE',
         url: 'url',
         data:id
      }).then(function success(response) {
         alert('成功!');
      }, function error(response) {
          alert('失敗!');
 });

2、GET方式

// 2、GET方式
    // $http---get請求方式--- params參數會轉爲  ?param1=xx1¶m2=xx2的形式
    $http({
        url:"/doc.json",
        method:'GET',
        params:{
            'username':'admin'
        }
    }).success(function (response, status, headers, config) {
        /*成功信息*/
    }).error(function (response) {
        /*失敗信息*/
    });
    //快捷請求:
    $http.get(url, [config])
        .success(function(data){})
        .error(function(data){});

 3、POST方式

// 3、POST方式
    $http({method : 'POST',params : { id:1}, data:{name:'admin',age:1}, url : "/doc"})
        .success(function(response, status, headers, config){
            /*成功信息*/
        })
        .error(function(response, status, headers, config){
            /*失敗信息*/
        });

    // 快捷方式:
    $http.post(url,  $scope.formData).success(function (response, status, headers, config) {
        /*成功信息*/
    }).error(function (response) {
        /*失敗信息*/
    });

4、發送jsonp請求

 // 4、發送jsonp請求:
    //       爲了發送JSONP請求,url中必須包含JSON_CALLBACK參數, jsonp(url,config) 其中config是可選的
    // eg:
        var promise=$http.jsonp("/api/users.json?callback=JSON_CALLBACK");

5、$http提交表單

// 5、$http提交表單  --- 與Spring MVC交互, 使用這種方式
    // 通用方式:
    $http({
        method: "POST",
        url: url,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        data: $.param($scope.request)
    }).success(function(result){

    }).error(function(result){
    });

    // 快捷方式:
    $http.post(url, $scope.formData)
        .success(function(result){
        })
        .error(function(result){
        });

6.使用$http指定的方法發送HTTP請求

// 6、使用$http指定的方法發送HTTP請求:
    get(url, [config]);
    delete(url, [config]);
    post(url, data, [config]);
    put(url, data, [config]);

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章