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.
Download Script 
Live Demo 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>
<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"
},
[
{ "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 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("#9lessonsLinks");
});
}
);
});
</script>
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()
{
----
----
<div id="9lessonsLinks"></div>
{
----
----
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)
}
{
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)
9lessons Best Article
To create JSON easily you have to do this:
$result['title'] = $title;
$result['url'] = $url;
$result = json_encode($result);
echo $result;
yep
http://php.net/manual/en/function.json-encode.php
You may be interested in Creating or Parsing JSON in Java/JSP/Struts
Hi
If Call data.js from diferent domain will script work?
example
$.getJSON("http://domain.com/data.js", function(data)