Tag: ajax

Ajax Json jquery

ADMIN

How to convert the json obj into something
AJAX (Asynchronous JavaScript and XML).Request the data to server after page loads and get response.This is asynchronous.With AJAX we can change the particular content in a loaded page.

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is one of the best method to exchange data like XML.
jQuery is a java script library provides set of method to handle request and response.With jQuery we can request AJAX call to a server.
Server Script[server.php]

echo '{1:"PHP",2:"MYSQL",3:"AJAX",4:"JAVASCRIPT",5:"JSON"}';
Client Side Script:[test.php]
$.ajax({
   type: "POST",
   url: "server.php",
   data: "website="+website,
   success: function(resp){
	//alert(resp);
	eval("var response = " + resp);
	if(response!='')	{	
	//alert(response[1]);  // Return PHP
	//alert(response[2]);  // Return MYSQL
	for(jsonloop in response)
		alert(jsonloop+"-"+response[jsonloop]);		
	}
   },
   error: function(e){
     alert('Error: ' + e);
   }
 });

$.getJSON Method

Server Script[server.php]
Below are the php server script with json format about books

//header('Content-type: text/json');	
header('Content-type: application/json');
echo '{"title": "Learning Jquery",
"date_published": "June 2007",
"description": "Better interation design and development with simple javascript Techniques.An easy-to-learn syntax, and robust cross-platform compatibility in a single compact file",
"ISBN": "978-1-847192-50-9",
"author": "Jonathan chaffer and Karl swedberg",
"tags": "Jquery Javascript design js framework"}';

Client Side Script:[test.php]
Below are the client side code

$.getJSON("http://localhost/server.php",

        function(data){$.each(data,function(i){
		
			$("#json").append("< br />"+i+":"+data[i]);
		
		})
});

Output would be

title:Learning Jquery
date_published:June 2007
description:Better interation design and development with simple javascript Techniques.An easy-to-learn syntax, and robust cross-platform compatibility in a single compact file
ISBN:978-1-847192-50-9
author:Jonathan chaffer and Karl swedberg
tags:Jquery Javascript design js framework

$.ajax Method [Both GET and POST without datatype]

Client Side Script:[test.php]
Below are the client side code.When using ajax method, JSON response returned and stored in data variable. But this variable become strings. So using eval method make it to objects

$.ajax({
url: "http://localhost/testing/js/jquery/ajaxjson_server.php",
type: 'GET',
data: "sid="+Math.random(),
success: function(data) {
eval("data="+data);
$.each(data,function(i){
$("#book").append("< br/ >"+i+":"+data[i]);
})
}
});

$.ajax Method [Both GET and POST with datatype]

Client Side Script:[test.php]
Below are the client side code.When using ajax method, JSON response returned and stored in data variable.When using datatype as json, it parses into object.So no need to use eval function. 

$.ajax({
url: "http://localhost/testing/js/jquery/ajaxjson_server.php",
type: 'GET',
dataType: 'json',
data: "sid="+Math.random(),
success: function(data) {
$.each(data,function(i){
$("#book").append("< br/ >"+i+":"+data[i]);
})
}
});

Output would be

title:Learning Jquery
date_published:June 2007
description:Better interation design and development with simple javascript Techniques.An easy-to-learn syntax, and robust cross-platform compatibility in a single compact file
ISBN:978-1-847192-50-9
author:Jonathan chaffer and Karl swedberg
tags:Jquery Javascript design js framework