X
    Categories: JqueryJson

How to dispaly json data using jquery?

JSON (Java Script Object Notation) is a lightweight data passing format and human readable contains java structures. In this post I want to explain Creating JSON file with PHP and Display JSON data using jquery and Ajax. Using JSON we can interchange data between the browsers and the server.

<posts>

<title>17educations | Programming Blog</title>
<url>http://www.17educations.com</url>

<title>jQuery and Ajax Demos</title>
<url>Display-JSON-Data-with-jQuery-and-Ajax</url>

</posts>

 JSON Structure

Take a look at data.js file click here

{"posts": 
[
{ 
"title":"17educations | Programming Blog", 
"url":"http://www.17educations.com" 
}, 
{ 
"title":"jQuery and Ajax Demos", 
"url":"Display-JSON-Data-with-jQuery-and-Ajax"
}, 
]
}

 Javascript Code


Loading data.js(json file) data using jQuery and Ajax. Take a look at live preview click 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("#appendData");
});
}
);
return false;
});
});
</script>

<div id=”appendData”></div>

Load Click

Load data while clicking just replace javascript code : $(document).ready(function() to $(‘.load’).click(function()

$(".load").click(function()
{
----
----
return false;
});

<div>
<input type="button" >
<div id="appendData"></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)

 

 

Marimuthu: