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>

score 2 · Accepted Answer · answered Jul 03 '16 at 09:10

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 03 '16 at 09:10

JB Nizet

678,734
91
1,224
1,255

I tried the method that you propose and I am getting now a POJO with the parameter 'input' equal to null. – Nikita Vlasenko Jul 03 '16 at 10:36
So, I suppose the binding needs to be fixed or smth, not sure – Nikita Vlasenko Jul 03 '16 at 10:37
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 Jul 03 '16 at 10:39
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)`. – JB Nizet Jul 03 '16 at 11:02
OK, tried it and now the server responds with `415` error: `Unsupported Media Type for URL`. Probably, now Angular2 passes the data in the wrong format? – Nikita Vlasenko Jul 03 '16 at 11:14
Do you have Jackson in the libraries of your webapp? – JB Nizet Jul 03 '16 at 11:42
Yes, I have it in the `pom.xml` file. – Nikita Vlasenko Jul 03 '16 at 11:54
Don't use Jackson 1.9. Use the jackson2 version that your version of Spring recommends. – JB Nizet Jul 03 '16 at 12:20
Data mapper's last version is 1.9: https://mvnrepository.com/artifact/org.codehaus.jackson/jackson-mapper-asl – Nikita Vlasenko Jul 03 '16 at 12:25
Or should I use smth completely different? – Nikita Vlasenko Jul 03 '16 at 12:26
No worries, got it, will try – Nikita Vlasenko Jul 03 '16 at 12:26
Because you're looking at Jackson1. Jackson2 is there: https://mvnrepository.com/artifact/com.fasterxml.jackson.core/jackson-databind. Which Spring version are you using? – JB Nizet Jul 03 '16 at 12:27
1

Yes, it is solved, it was the wrong jackson version too. Thank you very much! – Nikita Vlasenko Jul 03 '16 at 12:34
Glad. I was out of ideas. – JB Nizet Jul 03 '16 at 12:34

score 0 · Answer 2 · answered Jul 03 '16 at 10:30

0

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

try let body = { input: nameId };

answered Jul 03 '16 at 10:30

Gaurav Mukherjee

6,205
2
23
33

score 0 · Answer 3 · answered Jul 18 '16 at 20:42

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;

Angular2 does not pass parameters in POST request

3 Answers3