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://9lessons.net63.net/9lessons.json.js"></script>
<link href="http://9lessons.net63.net/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://9lessons.net63.net/9lessons.json.js"></script>
<link href="http://9lessons.net63.net/9lessons_json.css" rel="stylesheet" type="text/css">
<ol id="9lessons" class="jsonbox"></ol>
9lessons.json.js
Javascript code read the JSON file.
$(function()
{
$(document).ready(function()
{
$.getJSON("http://9lessons.net63.net/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;
});
});
{
$(document).ready(function()
{
$.getJSON("http://9lessons.net63.net/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://9lessons.net63.net/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://9lessons.net63.net/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
Thanks Man!!
Please, use json_encode()
doesnt work with real cross-domain!!!
Nice insight on cross domain communication.
But 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..
But 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 :)
Mia
@Mia Zoe
Thank you. I configured RT@tweetmeme to Rt@9lessons
Nice post. Thank you for this article