« Sending data between JavaScript and PHP using CodeIgniter, jQuery and JSON

June 29, 2009

0 - add yours »

I am sure you would have had many situations, where you had to pass large amounts of data from PHP to JavaScript. This is a very common need, especially when you are using Ajax. I have seen code where developers would send a comma separated string and parse it out in JavaScript. While it works, the code looks ugly and you can run into many issues if the data you are passing uses the delimiter (comma). A more cleaner approach, of course, is to send data through XML. But parsing XML on the client side might be an overkill for mundane tasks. A quick, clean and simpler approach is to pass data in JSON format.

If you wonder what JSON is, here is what the JSON website says, “JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate.“.

The bottom line is that it is easy for ever one!

Making an Ajax request:
jQuery comes with JSON support and even lets you use it with Ajax calls. Let us say, you have an onblur event which makes an Ajax call to get data for the rest of the fields, you would do the following in your onblur event:

url = “http://www.domain.com/mycontroller/” + isbn;
$.getJSON(url, function(json){
document.book_form.publisher.value = json.publisher;
});

For those of you, who have used jQuery before, the above code looks plausible. For the rest, the above function is making an Ajax call to the URL and the second argument, function(json) is a callback function, that gets kicked off when the browser receives the response.

JSON can pack multi dimensional arrays too; the above example is just returning a row of data back to the client.