January 4, 2024 5:02 am

How to Callback Cross Domain Data with Jquery & JSON

In this Tutorial I am going to explain you that how you can callback cross domain data with jQuery and JSON(JavaScript Object Notation) is a lightweight data-interchange format. It’s simple and useful. Take a look at this live demo.

json_and_jquery

Just copy and paste this following code between tag. You can display phpgang 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://demo.phpgang.com/JSON/phpgang.json.js"></script>
<link href="http://demo.phpgang.com/JSON/phpgang_json.css" rel="stylesheet" type="text/css">
<ol id="phpgang" class="jsonbox"></ol>

phpgang.json.js
Javascript code read the JSON file.

$(document).ready(function()
{
$.getJSON("http://demo.phpgang.com/JSON/phpgang_json.php?count=5&jsoncall=?",function(data)
{
$.each(data.posts, function(i,data)
{
var jsondata ="<li>"+data.message+"</li>";
$(jsondata).appendTo("ol#phpgang");
});
}
);
return false;
});

phpgang_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 ']})';
}
?>

 phpgang_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(https://www.phpgang.com/wp-content/uploads/gang.jpg)
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}

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:

6 responses to “How to Callback Cross Domain Data with Jquery & JSON”

  1. vijay says:

    How can i download the script? I had entered my email id while downloading but did not happen.
    Am i missing anything?
    Please advise since i am new to this site

    • Huzoor Bux says:

      We update subscribers after every 18 hours that’s why you were unable to download now I have updated your email you can download tutorial.

      • vijay says:

        Ohk..that great..now i am able to download…thanks.

        Also in some scripts download option is not shown is there any reason for this also?

        E.g For the topic “How to Callback Cross Domain Data with Jquery & JSON” download option is not shown

        Thanks in advance.

        • Huzoor Bux says:

          Tutorial doesn’t content much complex code that’s why I haven’t add download link all code written in post.

  2. Gul Panra says:

    this is what i was looking for thanks for the tutorial!

  3. Abdulfatai says:

    I want to know pls how i can get remote data through a phoneGap mobile application using javascript

Leave a Reply

Your email address will not be published. Required fields are marked *