jQuery get | Using AJAX get method with examples

The get method of jQuery

The jQuery Get method ($.get(URL)) loads data from the server by using the HTTP GET request.

As mentioned in the $.ajax chapter, this is a short form of jQuery ajax method. The URL part is where a page or file name e.g. text file may be specified.

See online example of get method

The URL may be a .php or .aspx or some other file that may communicate with a database to return database’s data. Once returned, you can use this data to display in different elements of HTML without reloading the web page.

The get method is generally used to return data (GET) from the server while the data returned may be the cached data. If the scenario is to ensure that data must not be from the cache, the jQuery post() method should be used.

Another example of get method

Syntax of jQuery get method

Following is the syntax of jQuery ajax get method:

$.get( url, [data], [callback function], [type] )

Where

  • URL is a string specifying the server to which request is sent. This is the required parameter of get jQuery.
  • data: Here, you will specify the data to send to the server along with HTTP request. This is an optional parameter.
  • callback function: Optional parameter. If the request is successful, this function will execute. It also contains the returned data from the server. The other parameters in this jQuery get callback function are:

CallbackFunction(data, status, xhr)

Where

  • Data = returned data from the server.
  • Status = returns request status i.e. success, error, timeout, notmodified.
  • xhr= it contains XMLHttpRequest object. In case of Internet Explorer, it defaults to ActiveXObject otherwise XMLHttpRequest.
  • Type: It specifies the type of returned data from the server to the callback function. The returned data may be in these forms:  text, HTML, script, XML, JSON, jsonp.

jQuery ajax get example

In the following example, the jQuery get method is used to fetch data from a text file. The data from text file will be shown in a div element of the example page.

Click on the button “Load data…” and it will be loaded into a div without refreshing the web page. See the example by clicking the link below:

jQuery get

Experience this example online



A $.get example with a PHP file

Now, we will use a PHP file in the Get method of jQuery. First of all, two text boxes (name and location) are used to take values from the user. As you enter text and press the button, the $.get() method will call get_text.php file.

The .php will take the parameters and return the output string. All will be done without reloading the page by using the get method.

Note that, the get_test.php file is placed at same location where HTML source file, that uses $.get() method, is placed.

If AJAX call is successful the callback function will display returned data into “getrequest” Div. See demo online by clicking the link below:

jQuery get PHP

Experience this example online

First get_test.php code



HTML file using jQuery $.get() method



 

Also see: jQuery post() method


Was this article helpful?

Related Articles

Leave A Comment?