Whenever I work with AJAX, jQuery is my preferred JavaScript library and PHP is my preferred server-side language. Since I have no problems using json_encode() in PHP versions under 5.2.0, I use JSON whenever I can to pass data between JavaScript and PHP. After all, $.get and $.post both process JSON easily, so it’s my data type of choice.
Sometimes, however, I can’t rely on $.get and $.post to do the dirty work for me. One example is when I’m using a hidden iframe to upload a file via “AJAX”. To do this, the form posts the file to a server-side script. The script loads in the hidden iframe, so users don’t see what’s happening behind the scene. Once the upload is complete, the script outputs some information about the file to the iframe (filename, location, size, etc.). You can then use JavaScript to capture that information.
For the sake of consistency, my server-side script always outputs a valid JSON string. I rely on this data, which gets scooped out of the iframe, to tell me if the file got uploaded successfully and, if not, what the error was. If so, I need to know the filename, size, and location. What ends up in the iframe usually looks something like this:
{"filename":"file.ext","size":"2516582","location":"\/path\/to\/file\/file.ext"}
To parse the JSON string into a JavaScript object, I use eval(). (Some people prefer to use a JSON parser, but since the output of the script is controlled, I’ve never found it necessary for this application.) Alas, when JavaScript evaluates the string it results in an invalid label error.
The error is the result of eval() interpreting the first item in the string as a label. This gets me everytime, but it’s extremely easy to fix. Simply wrap the JSON string in parenthesis within eval():
var response = eval( '(' + jsonString + ')' );
This is one of those JavaScript “”gotchas”, so I hope I can save people (and myself) a lot of time by documenting it.
Hi Cory,
found your article at google.
You saved me a lot of time, thanks a lot! :)
Best regards from Germany,
Kevin
Arg, I was hitting this too–thanks so much for posting this. Also found you via Google search.
Thank you,
was getting crazy :)
Thanks!
google no1 hit and and cory no1 solution – thank you
I like most people are thankful you’ve posted this (and thankful to Google for indexing it). However I can’t quite get this to work with jQuery’s $.getJSON() function.
I’ve got $.getJSON(url, function ( data ) { results = eval( ‘(‘ + data + ‘)’; });
But I think it’s balking before it even gets to the “results = … ” part. Is there something I should set in my URL? (which already has “callback=?”
@jay: You don’t need to eval() the data parameter in your example. Since you’re using $.getJSON, jQuery does the parsing automatically for you :)
Cory, thanks for the reply but when I do it “right” with jQuery’s $.get() or $.getJSON I get the invalid label error.
So either feedburner or jQuery’s broken… Or I’m not doing it as right as I thought I was! :)
Sorry, I had to get back to my computer to paste code;
Here’s the line in question;
$.get(“http://api.feedburner.com/format/1.0/JSON?uri=thecapacity&callback=?”, {},
function ( data ) {
var results = eval( ‘(‘ + data + ‘)’ );
alert (results.toString() );
}, “jsonp”);
or;
$.getJSON(“http://api.feedburner.com/format/1.0/JSON?uri=thecapacity&callback=?”,
function (result) {
var container = $(“#blog_div”);
var blog_title = result.feed["title"];
});
Both fail…
Thank you so much. I was homicidal.
Thanks a bunch! You saved me a long night of frustration…
Hi Cory,
I am having the same problem as jay.
It give s me an invalid label error. Im using jQuery v1.3.2. I even checked the jquery and it is already encompassing the data recieved in ‘()’ and then evaluating. What could be the problem?
Please help, this is urgent.
Thanks in advance.
THANK YOU!
I was completely confused by the error, googled it, found you, and you saved me a lot of time.
Tim
may be this help someone:
http://stackoverflow.com/questions/790910/jquery-getjson-to-external-php-page/790931#790931