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?

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?

• javascript
• ajax
• reactjs

Share Improve this question Follow edited Nov 3, 2016 at 4:45 Shubham Khatri 282k5858 gold badges431431 silver badges411411 bronze badges asked Nov 3, 2016 at 4:30 MemoryLeakMemoryLeak 52533 gold badges88 silver badges2020 bronze badges 6

• 2 /api/Accounts isn't returning valid JSON – Jaromanda X Commented Nov 3, 2016 at 4:31
• should I remove the dataType:'json' from the above code? – MemoryLeak Commented Nov 3, 2016 at 4:33
• Do you expect JSON? console.log(xhr.responseText) or look at the request in the network panel to see what was returned. – epascarello Commented Nov 3, 2016 at 4:34
• 1 what does /api/Accounts return? dataType:'text', is a safe option I guess – Jaromanda X Commented Nov 3, 2016 at 4:34
• 1 201 don't have response body usually. Remove that dataType option and it will be fine. – Mat J Commented Nov 3, 2016 at 4:41

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 6

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

If you are not expecting a JSON format return, you may need to remove that instead.

submit(){    
    if(this.checkRequiredField()){
    $.ajax({
      url: '/api/Accounts',
      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)
    })
  }

just a suggestion, if you want to return a json from controller you can pass a custom message from controller, like saved successfully, keeping your same ajax code

  success: function(data, status, xhr) {            
        console.log(data.ResponseText );
      }

controller: based on condition

       return Json(new { success = true, 
ResponseText = "saved successfully" }, JsonRequestBehavior.AllowGet);