JSON.parse() does not work when content-type is set to application/json

Question

I am running into a jquery (bug/error) when trying to parse a JSON string returned from the server:

Timestamp: 10/04/2013 21:05:12
Error: SyntaxError: JSON.parse: unexpected character
Source File: http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
Line: 3

and I noticed that the JSON.parse works fine when the header Content-type is not set to 'application/json' but does not work if Content-type is set to json. any idea why this would happen?

Not Working Code:

Controller code:

  $response = array('data' => array('msg' => 'Form did not validate'), 'response_handler_fn' => 'sign_up_response_handler_fn');
  $this->getResponse()->setHttpHeader('Content-type','application/json');
  return $this->renderText(json_encode($response));

Javascript:

// ...
success: function( response ) {
var responseData = $.parseJSON(response);
}

Headers

Cache-Control   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection  Keep-Alive
Content-Length  92
Content-Type    application/json
Date    Wed, 10 Apr 2013 20:05:12 GMT
Expires Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive  timeout=15, max=100
Pragma  no-cache
Server  Apache
X-Powered-By    PHP/5.3.5

Response:

{"data":{"msg":"Form did not validate"},"response_handler_fn":"sign_up_response_handler_fn"}

Code that Does Work

Controller:

  $response = array('data' => array('msg' => 'Form did not validate'), 'response_handler_fn' => 'sign_up_response_handler_fn');
  return $this->renderText(json_encode($response));

Javascript the same as the one which does work

Headers:

Cache-Control   no-store, no-cache, must-revalidate, post-check=0, pre-check=0
Connection  Keep-Alive
Content-Length  92
Content-Type    text/html; charset=utf-8
Date    Wed, 10 Apr 2013 20:09:04 GMT
Expires Thu, 19 Nov 1981 08:52:00 GMT
Keep-Alive  timeout=15, max=100
Pragma  no-cache
Server  Apache
X-Powered-By    PHP/5.3.5

Response:

{"data":{"msg":"Form did not validate"},"response_handler_fn":"sign_up_response_handler_fn"}

Answer 1

When you don't specify the dataType option for the $.ajax call, jQuery attempts to parse the response according to the Content-Type header returned in the response.

So when you specify nothing for the dataType, and nothing special for the Content-Type header, response is parsed as text.

When you specify nothing for the dataType, and "json" for the Content-Type header, response is parsed as JSON (Javascript object literal).

When you specify the dataType as "json", it doesn't matter what the Content-Type header, the response is parsed as JSON (Javascript object literal).

Trying to pass an object literal to JSON.parse will fail, as it only accepts a string.

So you need to determine what things you're setting and what you're trying to call (JSON.parse), and use the right combination.