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('&');  }}