How to load data using JSON/PHP using jQuery

Written on Wednesday, May 6th, 2009 at 12:00 pm and is filed under jQuery.

I have seen a good amount of people wanting to see learn how to load data on their website using jQuery, JSON, and PHP. I thought I would show a simple example that should give you a jump start to your project.

We are going to use $.getJSON() function, you have something like:

$.getJSON("readJSON.php",function(data){
    $.each(data.posts, function(i,post){
          content = '
\n'; content += '

' + post.author + '

\n'; content += '+ post.date_added + '\n'; content += '' + post.post_content + '; content += ''
'; $("#contents").append(content).fadeIn("slow"); }); });

And example of JSON from the PHP page could look like:

{ posts: [{"id":"151","date_added":"2009-05-05 13:40:34","post_content":"This is a test post. jQuery!","author":"Ryan"},
{"id":"152","date_added":"2009-05-05 13:40:55","post_content":"Hey, you got to love Ajax","author":"John"}] }

That JSON above loads two records that will be displayed on to the page.

The results are being pulled from a MySQL database with tables: id, author, post_content, date_added, and author.

I am going to wrap up and article on the jQuery/PHP/JSON comment form with the results loaded on to the page after form submission, stay tuned for a much more in depth explanation of using JSON with PHP and jQuery.

Spread the ♥

  • Digg
  • del.icio.us
  • Facebook
  • NewsVine
  • Mixx
  • Google Bookmarks
  • email
  • Reddit
  • Design Float
  • StumbleUpon
  • Technorati

other related posts...

  1. Use jQuery To Submit Form To PHP/MySQL
  2. How to use jQuery to Serialize Ajax Forms
  3. Time for another iGoogle theme?
  4. Create a jQuery Accordion – remain open after page load
  5. jQuery Search And Highlight

Take a peak at some more?

5 Responses to “How to load data using JSON/PHP using jQuery”

  1. scvinodkumar says:

    Could you please post a simple full example? that would be very helpful to all who are all new to JSON

  2. Alan says:

    Where is the PHP code?

  3. daniel says:

    what about example php code ?

  4. Hey Alan, you can find it here: http://pastie.org/575889 – I have been really busy and am going to write some updates to this post along with validation and other functions.

Leave a Reply