Angular post请求传递参数

作者: zhaochenxi 分类: angular2,前端 发布时间: 2017-01-08 14:20

angular2中的post请求传递参数默认使用的请求header是’Content-Type’: ‘application/json’,所以后端MVC框架的请求header如果不是这个,那么是无法解析的,以下是官网教程的一个例子:

private headers = new Headers({'Content-Type': 'application/json'});

create(name: string): Promise<Hero> {
    return this.http
      .post(this.heroesUrl, JSON.stringify({name: name}), {headers: this.headers})
      .toPromise()
      .then(res => res.json().data)
      .catch(this.handleError);
 }

这个例子使用的就是json,但是如果MVC框架使用的不是json请求头,那么则不能解析,比如Spring MVC使用的就是’Content-Type’:’application/x-www-form-urlencoded’
那么上面的例子中的参数就无法解析,要解决这个问题就有两种方式了,修改Spring MVC的Header为’Content-Type’: ‘application/json’,或者修改Angular的Header为’Content-Type’:’application/x-www-form-urlencoded’.
建议采用后者。下面给出我的一个例子:

private headers = new Headers({'Content-Type':'application/x-www-form-urlencoded'});
login(mail:string,pass:string):Promise<User>{
   let urlSearchParams = new URLSearchParams();
   urlSearchParams.append('email', mail);
   urlSearchParams.append('password', pass);
   let param = urlSearchParams.toString()  
   return this.http.post(this.loginUrl,param,{headers: this.postHeader}).toPromise()
     .then(this.extractData)
     .catch(this.handleError);
 }

URLSearchParams是需要通过import {URLSearchParams} from ‘@angular/http’ 来引用的。该对象主要用于拼接请求参数。

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注