title: JQuery gives JSON syntax error when using PHP's json_encode
body: <p>I have an application that uses JQuery $.ajax to send JSON encoded data to server where I process it and then send back the results also JSON encoded. The problem is that JQuery gives a parse error when I want to process the response. (As if PHP's json_encode function outputs an invalid JSON format).
  Here comes the code:</p>
  
  <p>The Javascript code:</p>
  
  <pre><code>$.ajax({
       type: 'POST',
       url: URL+'pages/processListUIAjaxRequest',
       data:{filters: filters, rebuild_params: $('#rebuild_params\\['+unique+'\\]').val()},
       dataType: 'json',
       success: function(response){
            alert(response);
       },
       error: function(request, status, error){
            alert('Unable to update table contents');
            console.log(request);
            console.log(status);
            console.log(error);
       }
  });
  </code></pre>
  
  <p>This is a piece of the PHP code which outputs the response:</p>
  
  <pre><code>$response-&gt;addResult($uFilters);
  header('Content-Type: application/json');
  $response-&gt;toJSON(true);
  </code></pre>
  
  <p>The $uFilters is a simple array, and the toJSON method of the $response object is here:</p>
  
  <pre><code>public function toJSON($output = false){
          $out = array();
  
          if($this-&gt;hasErrors()){
              $out['has_error'] = true;
              $out['errors'] = $this-&gt;getErrors();
          } else $out['has_error'] = false;
          $out['result'] = $this-&gt;_result;
  
          if($output){
              echo json_encode($out);
          }else{
              return json_encode($out);
          }
      }// toJSON
  </code></pre>
  
  <p>Every time I run the code i get the 'Unable to update table contents', and on JavaScript console I have:</p>
  
  <blockquote>
    <p>'SyntaxError: JSON.parse: unexpected character'</p>
  </blockquote>
  
  <p>despite I defined dataType: as 'json' and the output is json_encode'd by PHP. On the JavaScript console I can see that the response text is:</p>
  
  <pre><code>"{"has_error":false,"result":{"page_id":"xxx"}}" 
  </code></pre>
  
  <p>Tried copy this and validate with online JSON validator tools, the interesting thing is it was valid a few times and it was invalid a few times (without any consistency) Im a bit confused.
  Tried to use other headers like:</p>
  
  <pre><code>header('Content-Type: text/json'); 
  header('Content-Type:javascript/json');
  header('Content-Type: application/json');
  </code></pre>
  
  <p>or with no header, but nothing.</p>
  
  <p>If I edit the JQuery ajax request's dataType to 'text' (despite the output is JSON formatted and and even the header says it is a JSON content), then the success handler runs and I got the response correctly. In this case the same problem comes when I try to $.parseJSON(response).</p>
  
  <p>What went wrong? Is my JSON string really invalid?</p>