AngularJs初探--讓AngularJS的$http 服務像jQuery.ajax()同樣工做

   最近着手開發一個後臺系統，前端採用的是AngularJs來與後臺交互，對於咱們這羣jquery瘋狂的鐵粉，遇到了很多轉不過彎的問題，爲了更高效的開發應用，在私下的時間收集和改造了一下AngularJS的$http 服務，特此分享。

$http的post
. 請求默認的content-Type=application/json
. 提交的是json對象的字符串化數據，
. 後端沒法從post中獲取，
. 跨域請求是複雜請求，會發送OPTIONS的驗證請求，成功後才真正發起post請求

jQuery.post
. 使用的是content-Type=application/x-www-form-urlencoded -
. 提交的是form data，
. 後端能夠從post中獲取，
. 簡單跨域請求，直接發送

 

解決思路：

1.改造前端

   （1）方案一：

        

配置$http服務的默認content-Type=application/x-www-form-urlencoded,若是是指配置這個的話，雖然提交的content-Type改了，可是提交的數據依然是個json字符串，不是咱們想要的form data形式的鍵值對，須要實現param方法. 

angular.module('MyModule', [], function($httpProvider) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

    /**
     * The workhorse; converts an object to x-www-form-urlencoded serialization.
     * @param {Object} obj
     * @return {String}
     */
    var param = function(obj) {
        var query = '',
            name, value, fullSubName, subName, subValue, innerObj, i;

        for (name in obj) {
            value = obj[name];

            if (value instanceof Array) {
                for (i = 0; i < value.length; ++i) {
                    subValue = value[i];
                    fullSubName = name + '[' + i + ']';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + '&';
                }
            } else if (value instanceof Object) {
                for (subName in value) {
                    subValue = value[subName];
                    fullSubName = name + '[' + subName + ']';
                    innerObj = {};
                    innerObj[fullSubName] = subValue;
                    query += param(innerObj) + '&';
                }
            } else if (value !== undefined && value !== null)
                query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&';
        }

        return query.length ? query.substr(0, query.length - 1) : query;
    };

    //一個function數組，負責將請求的body，也就是post data，轉換成想要的形式
    // Override $http service's default transformRequest    
    $httpProvider.defaults.transformRequest = [function(data) {
        return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }];
});

配合一點$resource的API參考，這個代碼就好懂了：
https://docs.angularjs.org/api/ngResource/service/$resource

Note:
上述param方法定義的地方不要使用jQuery.param方法，由於jQuery.param方法會將要處理的對象上的function全執行一邊，把返回的值當作參數的值，這是咱們不指望的，咱們寫的這個param方法也是爲了解決上面說的content-Type=x-www-form-urlencoded，可是提交的數據依然是json串的問題。

 

方案二：

  

$scope.formData = {};
        $http({
                method: 'POST',
                url: '/user/',
                data: $.param($scope.formData), // pass in data as strings
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' } // set the headers so angular passing info as form data (not request payload)
            })
            .success(function(data) {
                console.log(data);

                if (!data.success) {
                    // if not successful, bind errors to error variables
                    $scope.errorName = data.errors.name;
                    $scope.errorSuperhero = data.errors.superheroAlias;
                } else {
                    // if successful, bind success message to message
                    $scope.message = data.message;
                }
            });

參考
http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/

 

2.後端使用注意：

   （1）Spring MVC ajax後臺方法不能加 @RequestBody ，不然會報Failed to load resource: the server responded with a status of 415 (Unsupported Media Type)錯誤

   （2）使用Jquery 風格的寫法就OK啦！

萬事搞定，只欠高效開發，O(∩_∩)O哈哈~