Display JSON Data with jQuery and Ajax

Display JSON Data with jQuery and Ajax


XML Structure

<posts>

<title>9lessons | Programming Blog</title>
<url>http://9lessons.blogspot.com</url>

<title>jQuery and Ajax Demos</title>
<url>jquery-and-ajax-best-demos-part-3.html</url>

</posts>

JSON Structure 
Take a look at data.js file click here

{"posts": 

[

{ 
"title":"9lessons | Programming Blog", 
"url":"http://9lessons.blogspot.com" 
}, 
{ 
"title":"jQuery and Ajax Demos Pard - 3", 
"url":"jquery-and-ajax-best-demos-part-3.html"
}, 

]

}

Javascript Code
Loading data.js(json file) data using jQuery and Ajax. Take a look at live previewclick here

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() 
{
$(document).ready(function()
{
$.getJSON("data.js",function(data)
{
$.each(data.posts, function(i,data)
{
var div_data =
"<div ><a href='"+data.url+"'>"+data.title+"</a></div>";
$(div_data).appendTo("#9lessonsLinks");
});
}
);

return false;

});
});
</script>

<div id="9lessonsLinks"></div>

Load Click
Load data while clicking just replace javascript code :$(document).ready(function() to $('.load').click(function() Live Preview Click Here

$(".load").click(function()
{
----
----

return false;

});

<div>

<input type="button" value=" Load " class="load" />

</div>
<div id="9lessonsLinks"></div>

Creating JSON file with PHP

Database Table Posts

CREATE TABLE Posts
{
id INT PRIMARY KEY AUTO_INCREMENT,
title VARCHAR(200),
url VARCHAR(200)
}

json_data.php
Contains simple PHP code.

<?php

include('config.php');
$sql=mysql_query("select * from Posts limit 20");
echo '{"posts": [';
while($row=mysql_fetch_array($sql))
{
$title=$row['title'];
$url=$row['url'];
echo '

{

"title":"'.$title.'",

"url":"'.$url.'"

},'; 
}
echo ']}';

?>

Loading PHP file

If you want to load PHP file replace javascript code$.getJSON("data.js",function(data)
to  
$.getJSON("json_data.php",function(data)