AngularJs2 http 与SpringMVC后台交互传参问题

AngularJs2 Post传参与SpringMVC后台交互问题

最近在做项目的时候碰到的一个问题。Angular2中的http访问SpringMVC时总是取不到参数。翻出原来写的ng1项目看了之后，试了一下，发现了问题，跟大家分享一下。

angular1.x和2.0默认都是application/json形式，SpringMVC的controller接收值类型是form，contentType是application/x-www-form-urlencoded。所以需要在ng客户端设置header。

ng1

        var deffer = $q.defer();
            $http({
                method: "POST",
                headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
            }).success(function (response) {
                deffer.resolve(response);  // 声明执行成功，即http请求数据成功，可以返回数据了
            }).error(function (data, status, headers, config) {
                //错误信息
                deffer.reject(data);   // 声明执行失败，即服务器返回错误
            });
            return deffer.promise;

ng2

const options = new RequestOptions({'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'});

this.http.post(requestUrl, params, options)

设置之后访问依然也是不行，参数类型是在Chorme中是request payload。依然得不到参数。后来查资料发现问题是对象不能当做string传。所以改成form的格式就可以了。

把对象转成 url?param=value&param=value的格式

贴一下封装好的方法。

ng1

        /**
         * post方法
         * @param url
         * @param param
         * @returns {Promise}
         */
        post: function (url, param) {
            var deffer = $q.defer();
            $http({
                method: "POST",
                url: domain + url,
                data: param,
                headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'},
                transformRequest: function (obj) {
                    var str = [];
                    for (var p in obj) {
                        str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                    }
                    return str.join("&");
                }
            }).success(function (response) {
                deffer.resolve(response);  // 声明执行成功，即http请求数据成功，可以返回数据了
            }).error(function (data, status, headers, config) {
                //错误信息
                deffer.reject(data);   // 声明执行失败，即服务器返回错误
            });
            return deffer.promise;
        }

ng2

import {Injectable} from '@angular/core';
import {Http, Headers, RequestOptions} from '@angular/http';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class NetService {
  private headersJson = new Headers({'Content-Type': 'application/json;charset=UTF-8'});
  private headersForm = new Headers({'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'});
  private domain: String = 'http://localhost:3131/ng2API';

  constructor(public http: Http) {
  }

  /**
   * get请求
   * @param url
   * @param mParam
   * @returns {Promise<TResult|T>}
   */
  public httpGet(url: string) {
    const options = new RequestOptions({headers: this.headersJson});
    const requestUrl: string = this.domain + url;
    return this.http.get(requestUrl, options)
      .toPromise()
      .then(res => res)
      .catch(err => {
        return err;
      });
  }

  /**
   * post请求
   * @param url
   * @param mParam
   * @returns {Promise<TResult|T>}
   */
  public httpPost(url: string, mParam: any) {
    const options = new RequestOptions({headers: this.headersForm});
    const requestUrl: string = this.domain + url;
    return this.http.post(requestUrl, this.encodeParam(mParam), options)
      .toPromise()
      .then(res => res)
      .catch(err => {
        return err;
      });
  }

  public getDomainUrl() {
    return this.domain;
  }

  /**
   * 改变排列格式
   * @param obj
   * @returns {string}
   */
  private encodeParam(obj) {
    const str = [];
    for (const key of Object.keys(obj)) {
      const param = key + '=' + obj[key];
      str.push(param)
    }
    return str.join('&');
  }
}