Customize Consent Preferences

We use cookies to help you navigate efficiently and perform certain functions. You will find detailed information about all cookies under each consent category below.

The cookies that are categorized as "Necessary" are stored on your browser as they are essential for enabling the basic functionalities of the site. ... 

Always Active

Necessary cookies are required to enable the basic features of this site, such as providing secure log-in or adjusting your consent preferences. These cookies do not store any personally identifiable data.

No cookies to display.

Functional cookies help perform certain functionalities like sharing the content of the website on social media platforms, collecting feedback, and other third-party features.

No cookies to display.

Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics such as the number of visitors, bounce rate, traffic source, etc.

No cookies to display.

Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.

No cookies to display.

Advertisement cookies are used to provide visitors with customized advertisements based on the pages you visited previously and to analyze the effectiveness of the ad campaigns.

No cookies to display.

AJAX Structure with JQuery in JavaScript for Making a GET Call

Tiempo de lectura: 2 minutos

In this example, I’m going to show a basic structure for making a GET type AJAX request with jQuery in JavaScript.

First, we define the parameters of the AJAX request. Here, we set the URL to which we’ll send the request, the type of request which will be GET, and the type of data expected in the response (in this case, JSON).

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$.ajax({
url: 'https://example_devcodelight.com/api', // URL of the request
type: 'GET', // Type of request
dataType: 'json', // Type of data expected in the response
});
$.ajax({ url: 'https://example_devcodelight.com/api', // URL of the request type: 'GET', // Type of request dataType: 'json', // Type of data expected in the response });
$.ajax({
  url: 'https://example_devcodelight.com/api', // URL of the request
  type: 'GET', // Type of request
  dataType: 'json', // Type of data expected in the response
});

Then if the request is successful, the success function will be executed. Here, the response from the server is received and the received information can be processed. In this example, we’ll display the response in the browser console.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
success: function(response) {
console.log('Successful response:', response);
// Here you can process the received data
},
success: function(response) { console.log('Successful response:', response); // Here you can process the received data },
success: function(response) {
  console.log('Successful response:', response);
  // Here you can process the received data
},

In case the request fails, the error function will be executed. This allows handling errors properly. In the example, the error message is displayed in the browser console.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
error: function(xhr, status, error) {
console.error('Error in request:', status, error);
// Here you can handle the error appropriately
},
error: function(xhr, status, error) { console.error('Error in request:', status, error); // Here you can handle the error appropriately },
error: function(xhr, status, error) {
  console.error('Error in request:', status, error);
  // Here you can handle the error appropriately
},

The complete AJAX structure looks like the following as I show below.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
$.ajax({
url: 'https://example_devcodelight.com/api', // URL of the request
type: 'GET', // Type of request
dataType: 'json', // Type of data expected in the response
success: function(response) {
// Function handling successful response
console.log('Successful response:', response);
// Here you can process the received data
},
error: function(xhr, status, error) {
// Function handling errors during the request
console.error('Error in request:', status, error);
// Here you can handle the error properly
}
});
$.ajax({ url: 'https://example_devcodelight.com/api', // URL of the request type: 'GET', // Type of request dataType: 'json', // Type of data expected in the response success: function(response) { // Function handling successful response console.log('Successful response:', response); // Here you can process the received data }, error: function(xhr, status, error) { // Function handling errors during the request console.error('Error in request:', status, error); // Here you can handle the error properly } });
$.ajax({
  url: 'https://example_devcodelight.com/api', // URL of the request
  type: 'GET', // Type of request
  dataType: 'json', // Type of data expected in the response
  success: function(response) {
    // Function handling successful response
    console.log('Successful response:', response);
    // Here you can process the received data
  },
  error: function(xhr, status, error) {
    // Function handling errors during the request
    console.error('Error in request:', status, error);
    // Here you can handle the error properly
  }
});

I hope this helps. Have a great day!

0

Leave a Comment