Some days back I had posted a tutorial about parsing JSON data with jQuery .getJSON(). In this post I want to explain about 'How to use JSON callback and to display cross domain data with jQuery'. It's simple and useful. Take a look at this live demo
Previous Post:Display JSON Data with jQuey
Live DemoProfessional JavaScript for Web Developers (Wrox Programmer to Programmer)
Just copy and paste this following code between <body> tag. You can display 9lessons data.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.9lessons.info/9lessons.json.js"></script>
<link href="http://demos.9lessons.info/9lessons_json.css" rel="stylesheet" type="text/css">
<ol id="9lessons" class="jsonbox"></ol>
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="http://demos.9lessons.info/9lessons.json.js"></script>
<link href="http://demos.9lessons.info/9lessons_json.css" rel="stylesheet" type="text/css">
<ol id="9lessons" class="jsonbox"></ol>
9lessons.json.js
Javascript code read the JSON file.
$(document).ready(function()
{
$.getJSON("http://demos.9lessons.info/9lessons_json.php?count=5&jsoncall=?",function(data)
{
$.each(data.posts, function(i,data)
{
var jsondata ="<li>"+data.message+"</li>";
$(jsondata).appendTo("ol#9lessons");
});
}
);
return false;
});
9lessons_json.php
Contains PHP code displaying results from Messages table in JSON format.
<?php
include('config.php');
if($_GET['count'])
{
$count=$_GET['count'];
$count=mysql_real_escape_string($count);
$sql=mysql_query("select msg from messages order by msg_id desc limit $count");
echo $_GET["jsoncall"].'({"posts": [';
while($row=mysql_fetch_array($sql))
{
$message=$row['message'];
echo '
{
"message":"'.$message.'",
},';
}
echo ']})';
}
?>
include('config.php');
if($_GET['count'])
{
$count=$_GET['count'];
$count=mysql_real_escape_string($count);
$sql=mysql_query("select msg from messages order by msg_id desc limit $count");
echo $_GET["jsoncall"].'({"posts": [';
while($row=mysql_fetch_array($sql))
{
$message=$row['message'];
echo '
{
"message":"'.$message.'",
},';
}
echo ']})';
}
?>
9lessons_json.css
*{margin:0px; padding:0px;}
ol.jsonbox {
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
color:#FFFFFF;
list-style:none;
width:300px;
padding:10px 10px 25px 10px;
background:url(http://demos.9lessons.info/jsonlogo.png)
bottom right no-repeat;
background-color:#333333;
text-align:left
}
ol.jsonbox li { padding-bottom:4px}
ol.jsonbox li a{color:#80c8e5; text-decoration:none}
ol.jsonbox li a:hover{color:#80c8e5; text-decoration:underline}
ol.jsonbox {
font-family:"lucida grande",tahoma,verdana,arial,sans-serif;
font-size:11px;
color:#FFFFFF;
list-style:none;
width:300px;
padding:10px 10px 25px 10px;
background:url(http://demos.9lessons.info/jsonlogo.png)
bottom right no-repeat;
background-color:#333333;
text-align:left
}
ol.jsonbox li { padding-bottom:4px}
ol.jsonbox li a{color:#80c8e5; text-decoration:none}
ol.jsonbox li a:hover{color:#80c8e5; text-decoration:underline}
Wowwww,Its really usefull for me. I just get idea after readed this tutorial. thx
ReplyDeleteThanks Man!!
ReplyDeletePlease, use json_encode()
ReplyDeletedoesnt work with real cross-domain!!!
ReplyDeleteNice insight on cross domain communication.
ReplyDeleteBut giants like facebook, google and yahoo use the famous iframe technique combined with javascript hacks to make this work for all kind of cross-sub-domain stuff.
Here is a brief on how to do the same http://bit.ly/8BrgT8
I have tried this..
ReplyDeleteBut it throws me error ...
json cross domain Access to restricted URI denied" code: "1012 xhr
Mnay great scripts/tuts here Sriniva - however : can u please configure your Retweet button to RT @9lessons and not RT @tweetmeme ? its basically futile this way - know what I mean ? Wishing you continued future success within all your future life & career endeavors :)
ReplyDeleteMia
@Mia Zoe
ReplyDeleteThank you. I configured RT@tweetmeme to Rt@9lessons
Nice post. Thank you for this article
ReplyDeleteI like all your post.. the reason is that you have given with a demo...
ReplyDeleteGood site, congrulations ..
ReplyDeleteI have a question dear friend .Why does jquery effects disappear when I load a php page into a div?
[email protected]
hi nice work but, how can we use in wordpress?
ReplyDeleteinclude('config.php'); ? how can crea config.php
Nice ! :D
ReplyDeleteif ($count=(int)$_GET['count'])
ReplyDeleteno use of
if($_GET['count'])
{
$count=$_GET['count'];
$count=mysql_real_escape_string($count);
thanks for the tutorial. I've been fixed my code now. Why you don't put in your php code,
ReplyDelete//this is php code
header('Content-Type: application/json');
//end php code
In my opinion, it can be usefull to recognize the call back type.
Success for you
how to make this comment section ...
ReplyDeletehello its not working in cross domain i give Permission denied to access property 'body' error please give me solution?
ReplyDeletess
ReplyDeletei do no understand where "count" is from in the $_GET[] super gloabal
ReplyDelete