Angular2 不在 POST 请求中传递参数答案

【问题标题】：Angular2 does not pass parameters in POST requestAngular2 不在 POST 请求中传递参数
【发布时间】：2016-11-05 05:20:27
【问题描述】：

我正在尝试使用 Angular POST 请求将参数传递给 Tomcat 服务器 Spring Framework。不知何故，我看到参数在发送时就在那里，但它以某种方式没有到达/在后端正确检索。这是Angular2的代码：

addCompany() {
  console.log("addCompany button clicked!");
  console.log("company name: " + this.input);
  let nameId = this.input;
  let body = JSON.stringify({ input: nameId });
  let headers = new Headers({ 'Content-Type': 'application/json', 'X-CSRF-TOKEN':this.getToken() });
  console.log("csrf token: " + this.getToken());
  let options = new RequestOptions({ headers: headers });
this.http.post('http://localhost:8080/views/addcompany', body, options).toPromise()
    .then(() => {
      console.log("company added!");
      this.reloadList();
    });;
}

当我试图在 Spring 中获取它时，我得到了 null 的参数：

@RequestMapping(value = "/addcompany", method = RequestMethod.POST)
@ResponseBody
public void addCompany(HttpServletRequest request,
        HttpServletResponse response) {
    String nameId = request.getParameter("input");
    eventService.addCompany(nameId);
}

我也试过这样：

@RequestMapping(value = "/addcompany", method = RequestMethod.POST)
@ResponseBody
public void addCompany(Model model, @RequestParam("input") String nameId) {
    eventService.addCompany(nameId);
}

在 Angular 代码中，我一直在尝试在任何地方更改逗号，例如：

  let nameId = this.input;
  let body = JSON.stringify({ 'input': nameId });

等等。

我试过这个：Angular2 - Http POST request parameters

按照JB Nizet的建议，我尝试创建POJO：

public class Company {
public String input;

public Company() {
    this.input = "";
}

public String getInput() {
    return this.input;
}

public void setInput(String input) {
    this.input = input;
}
}

在我的@Configuration 文件中注册：

@Bean
public Company getCompany(){
    return new Company();
}

并将请求方法改为如下：

@RequestMapping(value = "/addcompany", method = RequestMethod.POST)
@ResponseBody
public void addCompany(Company company) {
    eventService.addCompany(company.input);
}

之后，我在 input=null 的方法中获得了 Company 对象。

然后我尝试从@Configuration注销Company@Bean并将请求方法更改为以下：

@RequestMapping(value = "/addcompany", method = RequestMethod.POST)
@ResponseBody
public void addCompany(@RequestBody Company company) {
    eventService.addCompany(company.input);
}

但在那之后我收到415 (Unsupported Media Type) 错误。

在pom.xml 我有以下杰克逊进口：

    <dependency>  
         <groupId>org.codehaus.jackson</groupId>  
         <artifactId>jackson-mapper-asl</artifactId>  
         <version>1.9.10</version>  
    </dependency>

用它代替第二个杰克逊版本解决了这个问题：

    <properties>
        ...
        <jackson.version>2.7.5</jackson.version>
    </properties>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-databind</artifactId>
        <version>${jackson.version}</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-core</artifactId>
        <version>${jackson.version}</version>
    </dependency>
    <dependency>
        <groupId>com.fasterxml.jackson.core</groupId>
        <artifactId>jackson-annotations</artifactId>
        <version>${jackson.version}</version>
    </dependency>

【问题讨论】：

标签： spring spring-security angular

【解决方案1】：

您正在发送一个 JSON 对象作为正文，并且您希望获得一个包含此 JSON 对象属性的请求参数。

那不会发生。您需要一个与发送的 JSON 结构相匹配的 POJO，将该 POJO 作为参数并使用@RequestBody 对其进行注释。 Jackson 会将 JSON 解组为 POJO，然后 POJO 将传递给您的方法。

如果请求包含 application/x-www-form-urlencoded 有效负载，则可以使用请求参数：您在提交 HTML 表单时发送的有效负载类型，无需执行任何 JavaScript。

【讨论】：

我尝试了您建议的方法，现在我得到了一个参数“输入”等于 null 的 POJO。
所以，我想绑定需要修复或smth，不确定
编辑您的问题并发布此 POJO 的代码和 addCompany 方法的新代码。还要确保浏览器实际发送了非空输入。
不要在你的配置中注册它。它不应该是单例 Spring bean。每次调用该方法时，只需由 Spring 创建和填充一个 POJO。而且，正如我上面所说，参数必须使用 RequestBody 进行注释：public void addCompany(@RequestBody Company company).
是的，已经解决了，也是错误的jackson版本。非常感谢！

【解决方案2】：

而不是 let body = JSON.stringify({ input: nameId });

试试 let body = { input: nameId };

【讨论】：

【解决方案3】：

尝试使用：

let body:string='input='+nameId;

并使用这个标题

let headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded', 'X-CSRF-TOKEN':this.getToken() });

如果您要发送超过 1 个参数，仅适用于其他读者。使用 something & 来回分隔参数。像下面的代码

let body :string='username='+username+'&password='+password;

【讨论】：