如何使用多个参数在 angular5 中发送 POST？答案

【问题标题】：How to send POST in angular5 with multiple params?如何使用多个参数在 angular5 中发送 POST？
【发布时间】：2018-05-14 12:28:04
【问题描述】：

我在 angular5 简单项目（前端）和后端（spring boot）中工作，我想用 2 个参数 idPerson 和 idProject 向 api rest 发送一个 post 请求，所以 api rest 会影响项目对于选定的人，我尝试在使用 POST 的服务中执行此操作，但这是不可能的。

这是 ProjectService.ts 的代码

    addProjToClient(idPerson:number,idProject:number){
    if(this.authService.getToken()==null) {
      this.authService.loadToken();
    }
    return this.http.post(this.host+"/saveProjectToClient",idPerson,idProject,{headers:new HttpHeaders({'Authorization':this.authService.getToken()})});

  }

在 http Post 中不能发送超过 2 个参数，我使用 httpClient。

你知道怎么做吗？

【问题讨论】：

标签： angular httpclient angular5 angular2-services

【解决方案1】：

http.post 的第二个参数是发布请求的正文。只需将两个值都放在正文中，然后将它们从服务器上的正文中取出。

return this.http.post(this.host+"/saveProjectToClient", {
  idPerson,
  idProject,
}, {
  headers:new HttpHeaders({
    'Authorization': this.authService.getToken()
  })
});

在服务器上（Springboot）

public class Dto {
    private String idPerson;
    private String idProject;
}


@Controller
@RequestMapping("/")
public class ExampleController {

   @PostMapping("/saveProjectToClient")
   public ResponseEntity postController(@RequestBody Dto dto) {
      System.out.print("Person Id was: ");
      System.out.println(dto.idPerson);
      System.out.print("Project Id was: ");
      System.out.println(dto.idProject);

      return ResponseEntity.ok(HttpStatus.OK);
    }
}

【讨论】：

如何将它们从服务器的主体中取出？我正在使用弹簧靴
我以前从未做过 Spring Boot，但我用我最好的猜测更新了我的答案。
再次返回我尝试了这个，我不知道为什么，但似乎 ResponseEntity 无法访问。后端没有收到post请求的同时没有错误。
这是一个很好的解决方案。就像 dEst12ZER 提到的那样，调用永远不会到达后端。你会得到一个 http 400。从技术上讲，Spring 框架不会将内部类作为 @RestBody 参数。
Http 400！ Spring 框架不会将 INNER 类作为 @RequestBody 参数。在您的项目 DTO 层中创建一个单独的 Dto 类。并在 Angular 中创建一个集合对象，您可以将其传递给 Web 服务调用... myservicecall (idper, idpro) { const myDto = { idPerson: idper, idProject: idpro, }; return this.http.post(this.host+"/saveProjectToClient", myDto, { headers:new HttpHeaders({ 'Authorization': this.authService.getToken() }) }); }

【解决方案2】：

在 json 对象中添加所有参数，例如： { idPerson: 'personId', idProject: 'projectId'} 作为第二个参数

【讨论】：

【解决方案3】：

createRange(range: any, details: any): Observable { 
    let headers = new HttpHeaders().set('Content-Type', 'application/json'); 
    let body = JSON.stringify({ 'range': range, 'details': details }); 
    return this.httpClient.post(this.serviceURL + '/save', body, { headers });
}

【讨论】：

【解决方案4】：

试试这样的：

generisiIOS(idtipkomitenta: number, idtipios: number, datumpreseka: Date, idkorisnika: number) {
        let bodyString = JSON.stringify({ idtipkomitenta, idtipios, datumpreseka, idkorisnika });
        let headers = new HttpHeaders({ 'Content-Type': 'application/JSON' });
        return this._http.post<number>('faktura/generisiios', bodyString, { headers });
    }

【讨论】：

你能解释一下这个方法吗？
@dEs12ZER 这很容易解释。您使用（在本例中为 4 个参数）调用服务。由于您使用的是 POST，因此它们将作为 JSON 放入正文中。我使用 http 拦截器作为令牌，所以在我的情况下，我没有在标头中设置令牌。在服务器端，您只需从 body 中选择它就可以了。