Social Networks

I was trying to find the best way to display results on my page via an Ajax call using jQuery, do you think the best way is to pass it as JSON or plain text?

Yes you are right. JQuery has an inbuilt json data type for Ajax and converts the data into a object. PHP% also has inbuilt json_encode function which converts an array into json formatted string. Saves a lot of parsing, decoding effort.

 

Display-JSON-Data-with-jQuery-and-Ajax

JSON (Java Script Object Notation) is a lightweight data passing format and human readable contains java structures. This post 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

download script

 

View online Demo

live-demo-tech-blog

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>

JSON Structure 

{"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"
}, 
]
}

Javascript Code
Loading data.js(json file) data using jQuery and Ajax.

<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");
});
}
);
return false;

});
});
</script>

Load Click
Load data while clicking just replace javascript code : $(document).ready(function() to$(‘.load’).click(function()

$(".load").click(function()
{
----
----
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)
}

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)

source: 9lession and stackoverflow

Leave a Reply

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

Allowed Tags:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>