Angular5中如何通过POST请求传递多个参数？

嘿，我一眼就看到问题所在了——Angular的HttpClient.post方法并不支持直接传递多个独立参数作为请求体，它的参数结构是固定的：第一个是接口URL，第二个是单个的请求体对象，第三个才是请求配置（比如headers这类）。你现在的写法把idProject当成了请求配置参数，这肯定会导致参数传递失败。

下面给你两种最常用的解决方案，你可以根据后端Spring Boot接口的接收方式来选择：

方案1：将参数包装为JSON对象作为请求体（推荐） #

这是REST API最常用的方式，把两个参数打包成一个JSON对象发送，后端用@RequestBody接收：

修改后的Angular代码 #

addProjToClient(idPerson: number, idProject: number) {
  if (this.authService.getToken() == null) {
    this.authService.loadToken();
  }
  // 把两个参数合并成一个对象作为请求体
  const requestBody = { 
    idPerson: idPerson, 
    idProject: idProject 
  };
  return this.http.post(
    `${this.host}/saveProjectToClient`,
    requestBody,
    { headers: new HttpHeaders({ 'Authorization': this.authService.getToken() }) }
  );
}

对应的Spring Boot后端代码 #

你需要创建一个DTO类来接收这个JSON请求体：

// 定义请求DTO
public class ProjectAssignmentRequest {
    private Long idPerson;
    private Long idProject;

    // 无参构造、全参构造
    // getter和setter方法
}

// Controller接口
@RestController
@RequestMapping("/")
public class ProjectController {
    @PostMapping("/saveProjectToClient")
    public ResponseEntity<Void> assignProjectToClient(
            @RequestBody ProjectAssignmentRequest request,
            @RequestHeader("Authorization") String token) {
        // 这里写你的业务逻辑：根据idPerson和idProject分配项目
        return ResponseEntity.ok().build();
    }
}

方案2：用FormData传递表单参数 #

如果你的后端接口期望接收表单格式（application/x-www-form-urlencoded）的参数，就用这种方式：

修改后的Angular代码 #

addProjToClient(idPerson: number, idProject: number) {
  if (this.authService.getToken() == null) {
    this.authService.loadToken();
  }
  const formData = new FormData();
  formData.append('idPerson', idPerson.toString());
  formData.append('idProject', idProject.toString());
  return this.http.post(
    `${this.host}/saveProjectToClient`,
    formData,
    { headers: new HttpHeaders({ 'Authorization': this.authService.getToken() }) }
  );
}

对应的Spring Boot后端代码 #

直接用@RequestParam接收单个参数：

@PostMapping("/saveProjectToClient")
public ResponseEntity<Void> assignProjectToClient(
        @RequestParam("idPerson") Long idPerson,
        @RequestParam("idProject") Long idProject,
        @RequestHeader("Authorization") String token) {
    // 业务逻辑处理
    return ResponseEntity.ok().build();
}

为什么原来的代码会失败？ #

再给你明确下HttpClient.post的方法签名：

post(url: string, body: any, options?: HttpHeaders | { headers?: HttpHeaders; observe?: 'body'; params?: HttpParams; reportProgress?: boolean; responseType?: 'json'; withCredentials?: boolean; }): Observable<any>

你原来的写法把idProject放在了第三个参数的位置，这个位置本来是给请求配置的，所以后端根本接收不到这个参数，反而会因为参数类型不匹配报错。

内容的提问来源于stack exchange，提问作者dEs12ZER