title: Extract Json response
body: <p>I am trying to to extract a Json response in jquery sent from a php file.
  This is the .js code:</p>
  
  <pre><code>    $.ajax({
   url: 'index.php?page=register', //This is the current doc
   type: 'POST',
   datatype: 'json',
   data: {'userCheck': username},
   success: function(data){
      // Check if username is available or not
   },
   error: function(){
      alert('Much wrong, such sad');
   }
  });
  </code></pre>
  
  <p>This is the response from the php file:</p>
  
  <pre><code>    if($sth-&gt;fetchColumn()!=0){
          //$response = array("taken");
          $response = array("username"=&gt;"taken");
          echo json_encode($response);
          //echo '{"username':'taken"}';
      }else{
          //$response = array("available");
          $response = array("username"=&gt;"available");
          echo json_encode($response);
          //echo '{"username":"available"}';
      }
  </code></pre>
  
  <p>I have tried all combinations I can think of in both files, but nothing seems to work. It is a simple check for a username in the database. If I console log the data I get from the response, I get this:</p>
  
  <pre><code>    {"username":"available"}&lt;!DOCTYPE html&gt;
      // The rest of the page html
  </code></pre>
  
  <p>So the info is there, but how do I access it? I have tried several syntaxes found around the internet, but no luck so far. I seem to recall that a json response only can contain valid json, so is the problem the html? I don't think I can avoid this due to the structure of my application, so hopefully it is possible to access the json with my present structure.</p>