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 callback 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.

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

Please keep comments relevant to jQuery.get().
Additional examples and requests for clarification are encouraged, but please do not use these comments as a bug tracker or support forum.
Please report bugs on the bug tracker or the jQuery Forum.
Request support on the jQuery Forum

Seth

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.

Hyponiq

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?

Karl Swedberg

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.

jQuery API