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://www.9lessons.info</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://www.9lessons.info</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://www.9lessons.info"
},
{
"title":"jQuery and Ajax Demos Pard - 3",
"url":"jquery-and-ajax-best-demos-part-3.html"
},
[
{ "title":"9lessons | Programming Blog",
"url":"http://www.9lessons.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. 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:
ReplyDelete$result['title'] = $title;
$result['url'] = $url;
$result = json_encode($result);
echo $result;
yep
ReplyDeletehttp://php.net/manual/en/function.json-encode.php
Hi
ReplyDeleteIf Call data.js from diferent domain will script work?
example
$.getJSON("http://domain.com/data.js", function(data)
Nice one article will u plz post same one in asp.net rather than php !!
ReplyDeletei have found the PHP part useful but the tailoring ',' made the total process unusable. I had to truncate the last occurrence of comma ',' programmability.
ReplyDeleteyou can use json encode for this you can use this as < ?php
ReplyDelete$result ="";
for($i=0;$i<10;$i++)
{
$result[$i]['title'] = "title " + $i;
$result[$i]['url'] = "url " + $i ;
}
$result = json_encode($result);
echo $result;
? >
How when clicking:
ReplyDelete"button" Load "
we want to send an id so the file :
json_data.php
can filter the sql statement and returns only data relative to that id ?
Thanks
i am a begginner.
ReplyDeletesuppose if we want the data to be displayed as
var products=["+data.url+"]; then how?
i want to display the data as var=[] from php so how can i proceed
ReplyDeletepls help
nice tutorial
ReplyDeleteHi ,
ReplyDeleteI am trying to implement display the contents frm database to my webpage using JSON and Jquery,here i would like to implement in java,Can i use it as above or is there any type of changes required here? Please share the code ,it will be very grateful for me.
Thanks in Advance.
I used this tutorial and it works great, however it does not work with jQuery 1.7. Would it be possible to get it working with the current release of jQuery?
ReplyDeleteI also tried it with newer jquery and unfortunately it doesn´t work. An update on this would be greatly appreciated!
ReplyDeletethanks for tutor.. i'll use this logic ! thanks
ReplyDeletewhen i choose to load data from a php script i don't have any data. When i execute directly my php script it shows me data. Any help please???
ReplyDeleteI can't show data from a php script and i when i test my php script it show correctly my data. ANy help please????
ReplyDeleteI can't show data from a php script using latest jquery.. please help. update the code..
ReplyDeleteNice one article will u plz post same one in Jquery rather than php !!
ReplyDeletevery nice
ReplyDeleteNice one. Great work.
ReplyDeleteHi Shrinivas,
ReplyDeleteYou create such a useful demos I have used your demos in various projects.
Thanks,
Chetan
hi,
ReplyDeleteUnable to use multiple name or values.
echo '{"posts": [';
while($row=mysql_fetch_array($myquery))
{
$p_id=$row['p_id'];
$p_name=$row['p_name'];
$p_description=$row['p_description'];
$p_img_url=$row['p_img_url'];
$p_url=$row['p_url'];
$p_pdfurl=$row['p_pdfurl'];
echo '
{
"p_id":"'.$p_id.'",
"p_name":"'.$p_name.'",
"p_description":"'.$p_description.'",
"p_img_url":"'.$p_img_url.'",
"p_url":"'.$p_url.'",
"p_pdfurl":"'.$p_pdfurl.'"
},';
}
echo ']}';
How to print them into a table format.
Can you please help me in this regards
demo aspect of this article is really good, makes u understand it quickly...
ReplyDeletekk
ReplyDeleteThank you much it was as if the world was crazy or dumb.....i looked for this kind of simple straight forwards tutorial for like 3 days....thank you buddy I am new fun
ReplyDeleteI have a problem with utf8, everything work very well, when I check the mail through www it is ok, but through MS outlook I don't see true utf sign, how can solve this problem?
ReplyDeletehow to display JSON response in HTML in PHP?
ReplyDeleteI've been looking everywhere for something like this. Just a good tutorial on How To. Thank you!!
ReplyDelete