{"id":289,"date":"2011-04-18T11:54:51","date_gmt":"2011-04-18T06:24:51","guid":{"rendered":"http:\/\/www.create-dynamic.com\/blog\/?p=289"},"modified":"2015-10-07T15:33:22","modified_gmt":"2015-10-07T10:03:22","slug":"ajax-json-jquery","status":"publish","type":"post","link":"https:\/\/www.create-dynamic.com\/blog\/289\/phptags\/ajax-json-jquery\/","title":{"rendered":"Ajax Json jquery"},"content":{"rendered":"

How to convert the json obj into something
\nAJAX<\/strong> (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.<\/p>\n

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

\n
echo '{1:\"PHP\",2:\"MYSQL\",3:\"AJAX\",4:\"JAVASCRIPT\",5:\"JSON\"}';<\/code><\/div>Client Side Script:[test.php]<\/strong>
$.ajax({\r\n   type: \"POST\",\r\n   url: \"server.php\",\r\n   data: \"website=\"+website,\r\n   success: function(resp){\r\n\t\/\/alert(resp);\r\n\teval(\"var response = \" + resp);\r\n\tif(response!='')\t{\t\r\n\t\/\/alert(response[1]);  \/\/ Return PHP\r\n\t\/\/alert(response[2]);  \/\/ Return MYSQL\r\n\tfor(jsonloop in response)\r\n\t\talert(jsonloop+\"-\"+response[jsonloop]);\t\t\r\n\t}\r\n   },\r\n   error: function(e){\r\n     alert('Error: ' + e);\r\n   }\r\n });\r\n
\r\n<\/code><\/pre>\n<\/div>\n
$.getJSON Method<\/h2>\n
Server Script[server.php]<\/strong>
\nBelow are the php server script with json format about books<\/p>\n
\n
\/\/header('Content-type: text\/json');\t\r\nheader('Content-type: application\/json');\r\necho '{\"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\"}';<\/code><\/pre>\n<\/div>\n
Client Side Script:[test.php]<\/strong>
\nBelow are the client side code<\/p>\n
\n
$.getJSON<\/strong>(\"http:\/\/localhost\/server.php\",
\r\n        function(data){$.each(data,function(i){
\t\t\r\n\t\t\t$(\"#json\").append(\"< br \/>\"+i+\":\"+data[i]);
\t\t\r\n\t\t})\r\n});\r\n<\/code><\/pre>\n<\/div>\n
Output would be<\/p>\n
\n
title:Learning Jquery\r\ndate_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\r\nISBN:978-1-847192-50-9\r\nauthor:Jonathan chaffer and Karl swedberg
tags:Jquery Javascript design js framework<\/code><\/pre>\n<\/div>\n
$.ajax Method [Both GET and POST without datatype]<\/h2>\n
Client Side Script:[test.php]<\/strong>
\nBelow 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<\/p>\n
\n
$.ajax({\r\nurl: \"http:\/\/localhost\/testing\/js\/jquery\/ajaxjson_server.php\",\r\ntype: 'GET',\r\ndata: \"sid=\"+Math.random(),\r\nsuccess: function(data) {\r\neval(\"data=\"+data);<\/strong>\r\n$.each(data,function(i){\r\n$(\"#book\").append(\"< br\/ >\"+i+\":\"+data[i]);\r\n})\r\n}\r\n});<\/code><\/pre>\n<\/div>\n
$.ajax Method [Both GET and POST with datatype]<\/h2>\n
Client Side Script:[test.php]<\/strong>
\nBelow 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. <\/p>\n
\n
$.ajax({\r\nurl: \"http:\/\/localhost\/testing\/js\/jquery\/ajaxjson_server.php\",\r\ntype: 'GET',\r\ndataType: 'json'<\/strong>,\r\ndata: \"sid=\"+Math.random(),\r\nsuccess: function(data) {\r\n$.each(data,function(i){\r\n$(\"#book\").append(\"< br\/ >\"+i+\":\"+data[i]);\r\n})\r\n}\r\n});
<\/code><\/pre>\n<\/div>\n
Output would be<\/p>\n
\n
title:Learning Jquery\r\ndate_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\r\nauthor:Jonathan chaffer and Karl swedberg
tags:Jquery Javascript design js framework
\r\n<\/code><\/pre>\n<\/div>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,23,1],"tags":[34,36,33,37,35],"class_list":["post-289","post","type-post","status-publish","format-standard","hentry","category-javascript","category-jquery","category-phptags","tag-ajax","tag-ajax-and-jquery","tag-ajax-json","tag-javascript-2","tag-jquery-2"],"_links":{"self":[{"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/posts\/289","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/comments?post=289"}],"version-history":[{"count":12,"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/posts\/289\/revisions"}],"predecessor-version":[{"id":378,"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/posts\/289\/revisions\/378"}],"wp:attachment":[{"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/media?parent=289"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/categories?post=289"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.create-dynamic.com\/blog\/wp-json\/wp\/v2\/tags?post=289"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}