Angular2 does not pass parameters in POST request

Question

I am trying to pass a parameter using Angular POST request to Tomcat server, Spring Framework. Somehow I see that the parameter is there when it is sent, but it somehow does not arrive/properly retrieved on the backend. Here is the Angular2 code:

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();
    });;
}

When I am trying to get it in Spring I am getting null for the parameter:

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

I tried also this way:

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

And in Angular code I have been trying to change commas everywhere, like:

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

etc.

I tried this one: Angular2 - Http POST request parameters

Following the suggestion JB Nizet I tried to create 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;
}
}

Register it in my @Configuration file:

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

And changed the request method to the following:

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

After that I am getting Company object in the method with input=null .

Then I tried to deregister the Company @Bean from @Configuration and change the request method to the following:

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

But after that I am getting 415 (Unsupported Media Type) error.

In pom.xml I have the following jackson import:

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

Substituting it for second jackson version solved the issue:

    <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>

Answer 1

You're sending a JSON object as body, and you expect to get a request parameter containing an attribute of this JSON object.

That won't happen. You need a POJO that matches with the structure of the JSON sent, take that POJO as argument and annotate it with @RequestBody . Jackson will unmarshal the JSON to the POJO and the POJO will be passed to your method.

Request parameters can be used if the request contains an application/x-www-form-urlencoded payload: the kind of payload you send when submitting a HTML form, without doing any JavaScript.

Answer 2

Instead of let body = JSON.stringify({ input: nameId });

try let body = { input: nameId };

Answer 3

Try to use :

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

And use this header

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

Only for other readers if you want to send more than 1 parameter. use something & fro separating parameter . like below code

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