JSON (JavaScript 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.
XML Structure
<posts>
<title>AskGif | Programming Blog</title>
<url>http://www.askgif.info</url>
<title>jQuery and Ajax Demos</title>
<url>jquery-and-ajax-best-demos-part-3.html</url>
</posts>JSON Structure
{"posts":
[
{
"title":"AskGif | Programming Blog",
"url":"http://www.askgif.info"
},
{
"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.
<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("#AskGifLinks");
});
}
);
return false;
});
});
</script>
<div id="AskGifLinks"></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" value=" Load " class="load" />
</div>
<div id="AskGifLinks"></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)
