Ajax post call returns parsererror

Question

I submit the reactjs form as mentioned below,

submit(){    
    if(this.checkRequiredField()){
    $.ajax({
      url: '/api/Accounts',
      dataType: 'json',
      type: 'POST',
      data: {               
          Name: this.state.name, 
          StartDate :this.state.startDate, 
          EndDate : this.state.endDate,
          UserCount: this.state.userCount          
        },
      success: function(data, status, xhr) {            
        console.log('data added successfully');
      }.bind(this),
      error: function(xhr, status, err) {
        console.error(status, err.toString());
      }.bind(this)
    })
  }

The above ajax post will call the respective Web Api post method, where the data got inserted successfully to the db.

After it posts the data, the program doesn't return to the success function, instead it calls error function and logs the error

parsererror SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data

when I checked the xhr.status, the value is 201 and statustext is Created.

Why the above ajax post call returns parsererror? how to fix this issue?

Answer 1

The problem is with the dataType mentioned in the ajax call.

The post method is not returning any json data, by changing the dataType :'json' to dataType:'text' fixed the issue.

Thanks Jaromanda X and Mathew Jibin for your inputs