jQuery, JSON

jQuery & JSON – Make JSON GET request using jQuery.getJSON()

12 Comments

The following example makes a HTTP GET request with a JSON input and return the corresponding JSON object.

–

 
Update @ 2011-10-12: The example here does not support cross domain request. In other words, the server.php and json-get.php have to be inside the same domain. (ex. localhost) Thanks dskanth for pointing out the problem.
jQuery & JSON – Make Cross Domain Request Using jQuery.getJSON() with JSONP

–

 
Add the following 2 files to your web server
server.php

<?php
  $arr1 = array ('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);
  $arr2 = array ('a'=>5,'b'=>4,'c'=>3,'d'=>2,'e'=>1);
  
  if ($_GET['param1'] == 'ykyuen' && $_GET['param2'] == 'eureka') {
    print json_encode($arr1);
  } else {
    print json_encode($arr2);
  }
?>

 

json-get.php

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  </head>
  <body>
    <script>
      // 1. The request domain has to be the same as server.php.
      // 2. You could replace the following url with 'server.php'
      $.getJSON('http://localhost/json-request/server.php', 
        {
          param1: "ykyuen",
          param2: "eureka"
        },
        success
      );
      
      function success(data) {
        $.each(data, function(key, val) {
          $("body").append(key + " : " + val + "<br/>");
        });
      }
    </script>
  </body>
</html>

 

Enter the json-get.php url in the browser and you should get the response below.
ex. http://localhost/json-request/json-get.php

 

Done =)

Next suggested post: jQuery & JSON – Make JSON POST request using jQuery.post()

Reference:

12 thoughts on “jQuery & JSON – Make JSON GET request using jQuery.getJSON()”

  1. Pingback: jQuery & JSON – Make JSON POST request using jQuery.post() | Eureka!

    1. i just try again and i didn’t find any error. Do you get any error from Firebug/Developer Tools?

      Make sure the file paths and the request URL are correct.

      Like

      Reply

      1. I did not get any error… and i found out that when i changed the server url to just the file name, i got the output.

        So instead of using: $.getJSON(‘http://localhost/json-request/server.php’,
        i used: $.getJSON(‘server.php’,

        And i got the output.

        Two small enhancements to the above code would be:

        1. Better to remove the script from the body part and place it inside the head section.
        2. Its nice to make a request within the jquery ready context.
        Like:
        $(document).ready(function(){
        $.getJSON(‘server.php’,
        {
        …..

        Like

    2. O. i think i made a mistake here. This example in this article does not work for cross domain request. i.e. it only works if both server and client side PHP files are in the same domain, say, localhost. This is why it works after u have changed the request URL to “server.php” instead of full URL.

      I will update this post and create another one to solve the issue.

      Thanks for your pointing out the problem. =)

      Like

      Reply
  3. Pingback: jQuery & JSON – Make Cross Domain Request Using jQuery.getJSON() with JSONP | Eureka!

  5. I don’t believe this is really sending over a JSON object – if you use Chrome and inspect the actual request it is simply taking your 2 parms and adding them as a query string.

    Like

    Reply

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.