json_encode and jQuery .ajax() not playing nicely ** output_buffering **

Question

I have a form set up that will take some input from the user and post it to a URL via jQuery's .ajax() function. The URL is on a separate sub-domain but I have set up CORS and everything that side is working fine.

What happens server side is the form is validated and, if an error is detected (error as in the form is completed incorrectly), I pass back the following JSON:

{"success": "false", "error": "Whatever the error is"}

This is working for me so I know the general set up is correct.

When the form is valid I perform a database query to retrieve the details of a bunch of files, receive this as an array, and pass all this back as JSON along with a success message. The JSON for this scenario is along the lines of:

{"success": "true", "files": [{"id":"4","file_name":"data_zones_scotland_2001.csv","nice_name":"Data Zone - Scotland","description":"","type":"1","coverage":"Scotland","distribution":"public","pack_type":"LSOAs, MSOAs, Data Zones, Intermediate Zones","link":"https:\/\/s3-eu-west-1.amazonaws.com\/data_zones_scotland_2001.csv?Expires=1396528176&Signature=V8ojfXhoH5eggIjwix265KGbr0M%3D"},{"id":"8","file_name":"intermediate_zones_scotland_2001.csv","nice_name":"Intermediate Zone - Scotland","description":"","type":"1","coverage":"Scotland","distribution":"public","pack_type":"LSOAs, MSOAs, Data Zones, Intermediate Zones","link":"https:\/\/s3-eu-west-1.amazonaws.com\/intermediate_zones_scotland_2001.csv?Expires=1396528176&Signature=ieaZYnZCz%2BpnJmWLeq5ygpJ9zNM%3D"}]}

Apologies for the long string but I wanted to get it all in there in case I missed something.

The problem I'm having is when I pass this back, I get a No 'Access-Control-Allow-Origin' header is present on the requested resource error. I know this to not be the case and I have tested the headers are set using curl -i http://url.... Taking out the files array and just returning {"success": "true"} works fine which suggests to me that the JSON within the files array is malformed, however passing that string through JSONLint tells me that the JSON is valid.

I'm running out of ideas as to where to turn to next as everything I am doing appears to be correct. The jQuery code handling the POST is as follows:

$.ajax({
    url: "http://domain.com/api/download-request",
    type: "POST",
    data: postData,
    dataType: 'json'
})
.done( function(data){
    console.log(data);
}); 

I'd appreciate any clues as to where to turn to next.

* UPDATE * In an attempt to solve this, I started by filtering the data received from the database, thinking there was something in a string that was breaking the output. I got to a point where I seemed to have narrowed it down to a specific record by limiting the amount of records returned until it broke. After retrieving just this record though it worked again. I persevered and then noticed that the error would generate when the JSON string hit a certain length (around 600 characters).

I've been into the php.ini to try and find a limit in there and once I increased the size of the output_buffering from 4096 to 8192 (doubled) the entire thing started working. I should mention that the output from the DB was without the URLs, considerably shortening the string length, so once I added these back in the application broke again until I increased the the buffer to 16384 (double again).

Now the application works but this is clearly not the best way of doing things. Is there a way that I can manage to output_buffering dynamically or change the way the echo is working so that PHP doesn't run out of buffer?

Answer 1

The issue was the output buffer becoming full. Increasing the size of the buffer or turning the buffer off solved this problem.

Answer 2

Use JsonP instead of json.

$.ajax({
 url:"testserver.php",
 dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
 success:function(json){
     // do stuff with json (in this case an array)
     alert("Success");
 },
 error:function(){
     alert("Error");
 }      
});

At the same time you may need to wrap the data with a callback function, just to represent jsonp data. check this link for more info on how to do so:allow cross domain ajax requests

REF:

• http://en.wikipedia.org/wiki/JSONP
• http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/
• jQuery AJAX cross domain

Happy Coding :)