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>

JB Nizet · Accepted Answer · 2016-07-03 09:10:18Z

2

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.

answered Jul 3, 2016 at 9:10

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

Nikita Vlasenko Over a year ago

I tried the method that you propose and I am getting now a POJO with the parameter 'input' equal to null.

Nikita Vlasenko Over a year ago

So, I suppose the binding needs to be fixed or smth, not sure

JB Nizet Over a year ago

Edit your question and post the code of this POJO and the new code for the addCompany method. Also make sure that a non-null input is actually sent by the browser.

JB Nizet Over a year ago

Don't register it in your configuration. It's not supposed to be a singleton Spring bean. Just a POJO created and populated by Spring each time the method is called. And, as I said above, the argument must be annotated with RequestBody: public void addCompany(@RequestBody Company company).

Nikita Vlasenko Over a year ago

Yes, it is solved, it was the wrong jackson version too. Thank you very much!

|

Gaurav Mukherjee · Accepted Answer · 2016-07-03 10:30:38Z

0

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

try let body = { input: nameId };

answered Jul 3, 2016 at 10:30

Gaurav Mukherjee

6,3352 gold badges25 silver badges33 bronze badges

Comments

Ali mohammadi · Accepted Answer · 2016-07-18 20:42:39Z

0

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;

answered Jul 18, 2016 at 20:42

Ali mohammadi

1,89926 silver badges27 bronze badges

Collectives™ on Stack Overflow

Angular2 does not pass parameters in POST request

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related