PinoyTech.org

CodeIgniter, Kohana, Mootools, jQuery and CSS

How to Use JSON with jQuery AJAX

Posted by teejay on November 6, 2009

This tutorial aims to show a brief sample of how to use jQuery AJAX with JSON.

Here's a clean sample of how to use AJAX with jQuery.

$('document').ready(function(){
    $('#submit).click(function(){
        $.post('your_php_page.php', {employee_id: '456'},
            function(data){
                console.log(data.first_name);
                console.log(data.last_name);
            }, 'json');
    })
});

The above example is already requests and receives data through AJAX using jQuery. We will however slice the code for better understanding of how it works.

I. Document Ready

The first statement is where jQuery checks to see if the document is ready to be manipulated

$('document').ready(function(){
});

II. Handle Event

The next line is the click handler. Clicking on the $('#submit') triggers the $.post

$('document').ready(function(){
    $('#submit).click(function(){
    })
});

$.post sends a POST request to the server. In this example, it returns the content of your_php_page.php.

III. Retrieving JSON

The data it POST'ed is $_POST['employee_id'] with the value of '456'.

The callback function retrieves the returned content/value in the variable, data in JSON format.

$('document').ready(function(){
    $('#submit).click(function(){
        $.post('your_php_page.php', {employee_id: '456'},
            function(data){

            }, 'json');
    })
});

IV. Parsing JSON

jQuery automatically parses the returned content/value and can be read as follows. variable.node, variable.node, etc. In our example the retrieved data could be seen in Firebug's console if you have Firebug installed on your Firefox browser.

$('document').ready(function(){
    $('#submit).click(function(){
        $.post('your_php_page.php', {employee_id: '456'},
            function(data){
                console.log(data.first_name);
                console.log(data.last_name);
            }, 'json');
    })
});

That's it! jQuery makes it a lot easier to do AJAX requests and parse returned content/value.

Note: Parsing data using jQuery isn't the safest way. See JSON and Browser Security

Categories: How To, Web Development

Tags: javascript, jquery, JSON

11 Comments

Ricky

Now that’s a tutorial. I hope you create more tutorials like this in the future!

November 6th 2009

Mike

Nice example. I like to know how to get data from a php script getting information from a mysql database.

November 6th 2009

Thorpe Obazee

@Mike. You are in luck. The next post will be about Retrieving JSON data from PHP and MySQL using jQuery.

November 6th 2009

Mag

It’s nice to see great tutorials like this about JSON and jQuery. Thanks for putting this up.

November 6th 2009

tutorials

I found your site on a tutorial directory. We recently launched tutorialgrad.com. It’s similar to those other tutorial sites only easier for you. All you have to do is submit your RSS Feed once, we do the rest. We will check your feed for tutorials and post them daily, all with direct links to your site (we don’t frame your content). If you are interested please check it out and let us know what you think.

November 7th 2009

Thorpe Obaze

@tutorialgrad. I’m delighted to see your site. Unfortunately, My RSS feed have been a problem lately. I’ll look into sending you my RSS feed as soon as possible.

November 18th 2009

Jeff

@Matt Cassarino: just call another function with the values as parameters.

April 22nd 2010

Matt Cassarino

Nice tutorial.  But how to use the values returned by JSON later in the Javascript?  It seems that they are only available for use within the function (data). 

January 19th 2010

Vishal

Hi Thanks…........
Great Eg….

February 15th 2010

Sharry

Hi there, thanks for the tutorial.
There is a missing single quote in this line (after : ‘#submit)

$(’#submit).click(function(){

May 15th 2010

Teejay

Thanks Sharry. Will fix it as soon as I can.

May 19th 2010

Comments are not allowed