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.

Use jQuery To Submit Form To PHP/MySQL

November 4th, 2008

Using jQuery to submit a form, is something you are seeing more and more of as jQuery’s popularity builds. When I first started reading about jQuery and Ajax all I wanted to do was learn how to submit a form using jQuery.

I was so confused and lost, seeing the code was so abstract to me. So in this tutorial, I want to show you how to use the jQuery framework to submit data through a form using jQuery to a PHP page that submits to a database.

We are going to take form data and submit it to a jQuery Ajax call then send that to a PHP page with the data. Check out a live example of this post.
Read the rest of this entry »