Angular-ajax

作者 Zhs 日期 2016-05-14
Angular-ajax

解决angular跨域问题

  • 后台添加可访问的地址来源(*代表全部)response.setHeader("Access-Control-Allow-Origin", "*");
  • 删除默认的请求头信息,并添加x-www-form-urlencoded的请求头类型(便于服务器端解析)

    angular 和 jQuery ajax传值的区别

  • angualr默认以json的格式传递数据{‘a’:1,’b’:3,’n’:’ss’},而jquery会对数据进行处理类似a=1&m=3&c=9这样。所以后台按照原来的方法会解析不到数据

    基于此,为了实现和jq一样的效果,需要在post之前对数据进行序列化。完整的代码如下:

    // 删除默认的请求头
    delete $httpProvider.defaults.headers.common["X-Requested-With"];

    // 添加请求头类型 x-www-form-urlencoded
    $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

    /**
    * 把json对象转为x-www-form-urlencoded 序列化的形式.
    * @参数类型 {Object} obj
    * @返回值 {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;
    };

    // 重写 $http 服务的默认请求
    $httpProvider.defaults.transformRequest = [function(data) {
    return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data;
    }];

将以上至于Angular应用的默认设置中,则就可以用默认的angular方式实现jquery一样的ajax请求。