jQuery API

jQuery.get()

Categories: Ajax > Shorthand Methods

jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] ) Returns: XMLHttpRequest

Description: Load data from the server using a HTTP GET request.

  • version added: 1.0jQuery.get( url, [ data ], [ callback(data, textStatus, XMLHttpRequest) ], [ dataType ] )

    urlA string containing the URL to which the request is sent.

    dataA map or string that is sent to the server with the request.

    callback(data, textStatus, XMLHttpRequest)A callback function that is executed if the request succeeds.

    dataTypeThe type of data expected from the server.

This is a shorthand Ajax function, which is equivalent to:

$.ajax({
  url: url,
  data: data,
  success: success
  dataType: dataType
});

The success callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.

As of jQuery 1.4, the success callback function is also passed the XMLHttpRequest object.

Most implementations will specify a success handler:

$.get('ajax/test.html', function(data) {
  $('.result').html(data);
  alert('Load was performed.');
});

This example fetches the requested HTML snippet and inserts it on the page.

Examples:

Example: Request the test.php page, but ignore the return results. 

$.get("test.php");

Example: Request the test.php page and send some additional data along (while still ignoring the return results). 

$.get("test.php", { name: "John", time: "2pm" } );

Example: pass arrays of data to the server (while still ignoring the return results). 

$.get("test.php", { 'choices[]': ["Jon", "Susan"]} );

Example: Alert out the results from requesting test.php (HTML or XML, depending on what was returned). 

$.get("test.php", function(data){
   alert("Data Loaded: " + data);
 });

Example: Alert out the results from requesting test.cgi with an additional payload of data (HTML or XML, depending on what was returned). 

$.get("test.cgi", { name: "John", time: "2pm" },
   function(data){
     alert("Data Loaded: " + data);
   });

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for jQuery.get() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • I'm developing adobe AIR html application. So, I have html form (packed in .air file), jquery request .xml file from server.

    Here is the code:

    $(document).ready(function() {
    $.get(baseUrl+'patient/xml', '', function(response) {
    console.log(response);
    loadXml(response);
    });
    });

    So... if I call this file from server, it is OK, but if I call it as local file, I get "empty string" as response.

    Here is access log from the server:

    This is if I open .html as file (not via http/apache)
    "OPTIONS /dentist/index.php/patient/xml HTTP/1.1" 200 6497 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7"

    This is same request but, the html file is on the server
    "GET /dentist/index.php/patient/xml HTTP/1.1" 200 6497 "-" "Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10.5; en-US; rv:1.9.1.7) Gecko/20091221 Firefox/3.5.7"

    Any hints?
  • vytautas
    Do not use it to get javascript , which uses document.write.
    This function may return results after page is loaded, and document.write will corrupt your page.
  • Jeremy Selph
    same as the example above, using jquery I want to get the content of another page (content.html), but I want to get the content which is in a div in the page (content div in content.html) can I do this using .get?

    $.get('ajax/content.html', function(data) {
    $('.result').html(data.contentdiv?);
    //alert('Load was performed.');
    });
  • AreN
    You should add a note about the XMLHttpRequest parameter beeing added in 1.4
  • How does this work with cross domain URL's? Is there any issue with trying to pull information from another URL via the .get method?
  • Eli
    If I'm doing something like this:

    function example () {
    var value = '';

    $.get('url', function (data) {
    process data;
    value = data.something;
    });

    return value;
    }

    the returned value of the example function is '', because it was returned /before/ the new value was set using the $.get function.

    how can I avoid it? I want the value to be returned only after the $.get function has finished it's thing.

    Thanks.
  • Expanding on carlo:
    Essentially, you would use an anonymous function to get the result of the request. Example:
    var value = (function () {
        var val = null;

        $.ajax({
            'async': false,
            'global': false,
            'url': 'path/to/url.php',
            'success': function (data) {
                val = data;
            }
        });

        return val;
    })();

    While this solution would suffice, there are a multitude of different ways to go about it. This is the simplest way (that I have found).
  • carlo
    you must set async option

    async Boolean
    Default: true

    By default, all requests are sent asynchronous (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

    see: http://api.jquery.com/jQuery.ajax/
  • nickretallack
    What happens if the server can't be reached or it returns an error code?
  • If you make the request with $.get() and it returns an error code, it fails silently unless you call the global .ajaxError() method. So, either use .ajaxError() in conjunction with $.get() or use $.ajax() with an error callback.