怎么让angular httpclient.post请求的body参数为键值对的形式?

坠入
  • 11

使用post请求时,传入的body参数是一个对象,得到的结果是这样:
图片描述
我希望他是这样:
图片描述
httpService中的代码:

 private headers = new HttpHeaders({
     "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
  });
login() {
    let bo = {
      a: "参数1",
      b: "参数2"
    };
    this.http
      .request(
        new HttpRequest("POST", "api/search/suggest/multimatch", bo, {
          headers: this.headers
        })
      )
      .subscribe(re => {
        console.log(re);
      });
   }

求哪位大佬指点指点。。

回复
阅读 7.3k
4 个回答

主要是因为前后端content-type设置不一致引起的;
在第三个参数中设置
headers: new HttpHeaders({'Content-Type': 'application/x-www-form-urlencoded'})
可以解决此问题

Yipeng
  • 2
新手上路,请多包涵

请问下,解决了吗?我目前也是。post后php拿不到参数

六只鱼
  • 2
新手上路,请多包涵
// 参数类型声明
interface ParamsType  {
  [propName: string]: any;
}


  /**
   * body为 urlencoding 的Post
   * @param _url|string 请求目标URL
   * @param _params|ParamsType 参数对象
   */
  Post(_url: string, _params: ParamsType): Observable<any> {
    const URL = environment.baseURL + _url;
    let messageId = this.commonService.showResponseMsg(this.ResponseMsgContent.add);
    const params = new HttpParams({
      fromObject: _params
    });
    return this.httpClient.post(URL, params, {
      headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
      })
    }).pipe(
      map((res: HttpResponse) => {
        this.message.remove(messageId);
        if (res.code === StateCode.ok) {
          this.message.success(res.msg);
          return res;
        } else {
          this.message.error(res.msg);
        }
      }),
      catchError(this.handleError)
    );
  }

代码如上,最重要的代码就是使用 HttpParams 将对象转变为键值对,然后放进 HttpClient 的 post 函数的第二个参数,同时设置 HttpHeaders

坠入
  • 11

使用$.param(data)为body.

this.http.post("api/search/suggest/multimatch", $.param(data), {
        params:  params,
        headers: this.headers
      })
      .subscribe(re => {
        console.log(re);
      });
 http://blog.csdn.net/maoguiyou/article/details/51891499
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏