How to load data using JSON/PHP using jQuery

May 6th, 2009

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.

Time for another iGoogle theme?

May 5th, 2009

So i came across my old iGoogle theme I made in the fall and was thinking of making another one. Shockingly, they’re extremely easy to create. Its a large XML document.  I have been working on a new layout for my site. I was thinking of another landscape but similar to the landscape, but different style.
Summer Landscape - iGoogle Theme

I am trying to free my schedule from client work to start working on the new layout, stil need to work on the move right text, bottom posts boxes, colors, and what the single page is going to look like, all in all its a work in progress. Almost done with a jQuery tutorial on submitting a  comment form and having the results loaded using jQuery/Ajax. The comments on the page are loading using PHP, JSON, and jQuery, very slick. Expect that very soon.