Reputation: 1

JSON response from PHP script being enclosed in <head></head><body> ... <body>

I am trying to debug a simple PHP/JSON/jQuery problem.

The following PHP script:

header('Content-type: text/javascript');
echo json_encode(array('type'=>'error','message'=>'arg'));

is being consumed by jQuery but when the line:

var results = jQuery.parseJSON(responseText);

is executed, the jQuery JSON parser gives the following:

uncaught exception: Invalid JSON: <head></head><body><pre>{"type":"error","message":"oops!"}</pre></body>

Obviously the head/body/pre are not supposed to be returned.

I cannot see any hidden characters nor anything out of order in my PHP code..

Any ideas?

Upvotes: 0

Answers (4)

JSmitty

Reputation: 248

This one has had me stumped for the last two days. I'm using the jQuery Form plugin's ajaxSubmit function to submit a form via AJAX without reloading the page. I finally stumbled across the answer after this question showed me a parameter I hadn't noticed previously: dataType.

Behind the scenes, an iframe is being created and is actually making the call back to the server. The response from the server is being pulled from the iframe, which is bringing along with it the tags.

The jQuery Form plugin handles the situation by allowing you to specify the type of response to expect from the server. If I specify 'json' as the response type, the following few lines of code are executed to get the JSON from within the tags:

// account for browsers injecting pre around json response
var pre = doc.getElementsByTagName('pre')[0];
if (pre) {
    xhr.responseText = pre.innerHTML;
}

(doc is a reference to the iframe's document and xhr is the XmlHttpResponse object that ultimately gets returned from the plugin's function.)

I don't know exactly how you're making your AJAX call, but I'm guessing a similar construct (perhaps using a document fragment) will allow you to extract the necessary JSON from the response.

Upvotes: 1