Tutorialsteacher

Follow Us

Articles
  • C#
  • C# OOP
  • ASP.NET Core
  • ASP.NET MVC
  • LINQ
  • Inversion of Control (IoC)
  • Web API
  • JavaScript
  • TypeScript
  • jQuery
  • Angular 11
  • Node.js
  • D3.js
  • Sass
  • Python
  • Go lang
  • HTTPS (SSL)
  • Regex
  • SQL
  • SQL Server
  • PostgreSQL
  • MongoDB
  • jQuery - Get Started
  • What is jQuery
  • jQuery - Environment Setup
  • Start using jQuery
  • jQuery - Selectors
  • jQuery - Methods
  • DOM Manipulation
  • Attributes Manipulation
  • Dimensions Manipulation
  • Traversing Elements
  • CSS Manipulation
  • Animation
  • Events
  • AJAX Introduction
  • AJAX Methods
  • Get Method
  • Post Method
  • Load Method
  • Selector Reference
  • DOM Manipulation Methods
  • Traversing Methods
  • Effects Methods
Entity Framework Extensions - Boost EF Core 9
  Bulk Insert
  Bulk Delete
  Bulk Update
  Bulk Merge

jQuery get() Method

The jQuery get() method sends asynchronous http GET request to the server and retrieves the data.

Syntax:
$.get(url, [data],[callback]);

Parameters Description:

  • url: request url from which you want to retrieve the data
  • data: data to be sent to the server with the request as a query string
  • callback: function to be executed when request succeeds

The following example shows how to retrieve data from a text file.

Example: jQuery get() Method
$$.get('/data.txt',  // url
      function (data, textStatus, jqXHR) {  // success callback
          alert('status: ' + textStatus + ', data:' + data);
    });
Try it

In the above example, first parameter is a url from which we want to retrieve the data. Here, we want to retrieve data from a txt file located at mydomain.com/data.txt. Please note that you don't need to give base address.

Internally, jQuery get() method calls ajax() method only. Visit james.padolsey.com/jquery and search for get() method to see the source code.

The second parameter is a callback function that will be executed when this GET request succeeds. This callback function includes three parameters data, textStatus and jQuery wrapper of XMLHttpRequest object. Data contains response data, textStatus contains status of request and jqXHR is a jQuery XMLHttpRequest object which you can use for further process.

The following example shows how to retrieve JSON data using get() method.

Example: Retrieve JSON Data using get()
$$.get('/jquery/getjsondata', {name:'Steve'}, function (data, textStatus, jqXHR) {
    \$('p').append(data.firstName);
}); 

<p></p>

In the above example, first parameter is a url from which we want to retrieve JSON data. This url can be a web service or any other url that returns data in JSON format.

The second parameter is data to be sent to the server as a query string. We have specified name parameter with value 'Steve' in the JSON format. So now, the request url would look like http://mydomain.com/jquery/getjsondata?name=Steve

The third parameter is a callback function that will be executed when this GET request succeeds.

jQuery getJSON() Method

The jQuery getJSON() method sends asynchronous http GET request to the server and retrieves the data in JSON format by setting accepts header to application/json, text/javascript. This is same as get() method, the only difference is that getJSON() method specifically retrieves JSON data whereas get() method retrieves any type of data. It is like shortcut method to retrieve JSON data.

Syntax:
$.getJSON(url,[data],[callback]);

Parameter Description:

  • url: request url from which you want to retrieve the data
  • data: JSON data to be sent to the server as a query string
  • callback: function to be executed when request succeeds

The following example shows how to retrieve JSON data using getJSON() method.

Example: jQuery getJSON() Method
$$.getJSON('/jquery/getjsondata', {name:'Steve'}, function (data, textStatus, jqXHR){
    $$('p').append(data.firstName);
});

<p></p>
Try it

In the above example, first parameter is a url from which we want to get JSON data. This can be a web service or any other url that returns JSON data.

The second parameter is data to pass as query string with the GET request. So now, the request url would look like http://mydomain.com/jquery/getjsondata?name=Steve

Internally, jQuery getJSON() method calls get() method and set dataType to JSON. Visit james.padolsey.com/jquery and search for get() method to see the source code.

The third parameter is a callback function which will be executed when request succeeds. The data parameter will be in the JSON format because getJson() method automatically converts server response into a JSON object.

You can attach fail and done callback methods to getJson() method as shown below.

Example: getJSON() Method
$$.getJSON('/jquery/getjsondata', { name:'Steve'}, function(data, textStatus, jqXHR){
                alert(data.firstName);
        })
        .done(function () { alert('Request done!'); })
        .fail(function (jqxhr,settings,ex) { alert('failed, '+ ex); });
Try it

jQuery getScript() Method

The jQuery getScript() method sends http GET request to the server, retrieves the JavaScript file and then executes it. Internally, jQuery getScript() method calls get() method and sets dataType to script.

Syntax:
$.getScript(url, [callback]);

Parameter Description:

  • url: request url from which you want to download JavaScript file
  • callback: function to be executed when request succeeds

The following example shows how to download script file using getScript() method.

Example: jQuery getScript() Method
$$.getScript('/Scripts/myJavaScriptFile.js', function(script,status,jqxhr){
            alert(status);
        });
Try it

In the above example, first parameter is a url from which we want to download script file. Here, we download myJavaScriptFile.js file for demo purpose.

The second parameter is a callback function which will be executed when request succeeds.

Thus, you can use different get methods to retrieve different types of resources using http get request.

Learn how to submit and retrieve data using http POST request in the next section.

TUTORIALSTEACHER.COM

TutorialsTeacher.com is your authoritative source for comprehensive technologies tutorials, tailored to guide you through mastering various web and other technologies through a step-by-step approach.

Our content helps you to learn technologies easily and quickly for learners of all levels. By accessing this platform, you acknowledge that you have reviewed and consented to abide by our Terms of Use and Privacy Policy, designed to safeguard your experience and privacy rights.

[email protected]

ABOUT USTERMS OF USEPRIVACY POLICY
copywrite-symbol

2024 TutorialsTeacher.com. (v 1.2) All Rights Reserved.