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

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:

About these ads

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. ykyuen Post author

      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.

      Reply
      1. Sashi Kanth

        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’,
        {
        …..

    2. ykyuen Post author

      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. =)

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

  3. Micke

    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.

    Reply

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s