jQuery Example to make GET method call with $.ajax()

JK1772 
Created at Mar 14, 2024 16:07:05
Updated at Oct 03, 2024 05:01:02 
  6,702   0   0  

Below is the example to call certain URL with $.ajax()

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery AJAX Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    $("#loadDataBtn").click(function() {
        $.ajax({
            url: "https://api.example.com/data", // URL to your API endpoint
            type: "GET", // HTTP method (GET, POST, PUT, DELETE, etc.)
            dataType: "json", // Expected data type from the server
            success: function(data) {
                // Callback function executed if the request succeeds
                // 'data' contains the response from the server
                console.log("Data loaded successfully:", data);
                // You can process the 'data' here, for example, display it on the webpage
                $("#result").html("<pre>" + JSON.stringify(data, null, 2) + "</pre>");
            },
            error: function(xhr, status, error) {
                // Callback function executed if the request fails
                console.error("Request failed:", status, error);
                // You can handle errors here, for example, display an error message
                $("#result").text("Error loading data. Please try again later.");
            }
        });
    });
});
</script>
</head>
<body>

<button id="loadDataBtn">Load Data</button>

<div id="result"></div>

</body>
</html>

In this example:

  • The jQuery library is included via a CDN.
  • The JavaScript code is enclosed within $(document).ready() to ensure it executes after the DOM is fully loaded.
  • When the button with the ID loadDataBtn is clicked, an AJAX request is initiated using $.ajax().
  • The request is a GET request to the URL "https://api.example.com/data".
  • The dataType option is set to "json", indicating that we expect JSON data in response.
  • If the request is successful, the success callback function is executed, where you can handle the response data.
  • If the request fails, the error callback function is executed, where you can handle errors.
  • In this example, the response data is displayed within the <div id="result">.


Associated Data for the jQuery AJAX GET Example:

  • jQuery AJAX: A powerful JavaScript library that provides a convenient way to make asynchronous HTTP requests to web servers.
  • $.ajax(): A core function within jQuery that handles AJAX requests.
  • GET Request: An HTTP method commonly used to retrieve data from a server.
  • API Endpoint: A specific URL that represents a resource available through an API.
  • JSON (JavaScript Object Notation): A lightweight data-interchange format commonly used for data transmission on the web.
  • Callback Functions: Functions that are executed in response to specific events, like the success or failure of an AJAX request.
  • DOM (Document Object Model): A programming interface for HTML documents that represents the structure and content of a web page.
  • CDN (Content Delivery Network): A network of servers distributed globally that can deliver content (like libraries) more efficiently.

Additional Notes:

  • The code in the example assumes the existence of a hypothetical API endpoint at "https://api.example.com/data".
  • The response data is displayed in a `` tag to preserve formatting.
  • Error handling is implemented using the `error` callback function.
  • The example illustrates a basic implementation of an AJAX GET request. More advanced techniques exist for handling various scenarios, such as data serialization, authentication, and error handling.


Tags: $.ajax() jQuery Share on Facebook Share on X

◀ PREVIOUS
Difference between Java and Javascript

▶ NEXT
Loading XML Data with JavaScript

  Comments 0
SIMILAR POSTS

Building a Brighter Future: Launching My First GitHub Repository for WE Service

(updated at Sep 22, 2024)


OTHER POSTS IN THE SAME CATEGORY

Loading XML Data with JavaScript

(updated at Oct 03, 2024)

Difference between Java and Javascript

(updated at Oct 03, 2024)

Regular Expressions in JavaScript

(updated at Oct 03, 2024)

UPDATES

Did you know that the person who voiced Humtrix Rumi in KPop Demon Hunters went to UIUC?

(updated at Sep 05, 2025)

WING - Dopamine

(created at Sep 05, 2025)

CARDIO VS Jackbryan | Korea Beatbox Championship 2025 | Semifinal

(updated at Sep 04, 2025)

Tech Visionaries who graduated at UIUC - You are the Next Turn

(updated at Sep 04, 2025)

Thinking about the Public Dataset and Open API provided for the Authorized People

(updated at Sep 04, 2025)

Where to Eat with Your i-Card at UIUC and How to Track Your Dining Dollars

(updated at Sep 04, 2025)

OMG! Did you consume your meals already at UIUC? How do you change the meal plan?

(updated at Sep 03, 2025)

Java Comments

(updated at Sep 03, 2025)

Abraham Lincoln Contributed to UIUC's Creation and its Mission

(created at Sep 03, 2025)

Feeling weak? Transform yourself at the UIUC ARC!

(updated at Sep 03, 2025)

Checking Your Upcoming Assignment/Exam Schedule: Using the UIUC Canvas Dashboard for Assignment Management

(updated at Sep 03, 2025)

UIUC Course Map for CS and Blended CS Degrees

(updated at Sep 02, 2025)

What You Need to Prepare for Graduate University at UIUC

(updated at Sep 01, 2025)

Did you know about the UIUC Course Numbering Policy? How to meet with 120 GPA hours?

(created at Sep 01, 2025)

My Dad's Bucket Hat Craze: One Man's Quest for Collegiate Headwear

(created at Aug 30, 2025)

Public Transportation between Chicago O'Hare International Airport and UIUC (University of Illinois at Urbana-Champaign)

(updated at Aug 27, 2025)

How to Receive Mail and Packages in University Housing at UIUC

(updated at Aug 27, 2025)

When you are too busy to have your breakfast/lunch/dinner, use Good2Go Carryout Program

(created at Aug 27, 2025)

Why Outlook’s Redirection Option Is a Game-Changer

(updated at Aug 27, 2025)

Why Every Freshman Needs the Illinois App at UIUC

(updated at Aug 24, 2025)

My First Day at University of Illinois-Urvana Champaign

(created at Aug 22, 2025)

Did you get Selective Service System(SSS) Form 3C?

(updated at Aug 17, 2025)

BlackPink's refreshing song - Jump

(updated at Aug 08, 2025)

Poisonous Mushrooms sprouted along the roadside after Typhoon

(updated at Aug 06, 2025)

Annual Weather Forecasting in Illinois based on Month

(updated at Aug 06, 2025)

My name has a typo in MyIllini - Need a Biographical change form

(updated at Jul 31, 2025)

Free Transportation Systems for UIUC students, faculty, and staff with I-Card

(updated at Jul 31, 2025)

What you can do with I-Card at UIUC

(updated at Jul 31, 2025)

Selecting a Bed Configuration before you move-in at UIUC Dormitory

(updated at Jul 30, 2025)

Student Health Insurance Waiver: Major Deadlines You Can’t Miss

(updated at Jul 22, 2025)

Types of Memory and Storage

(updated at Jul 22, 2025)

Sample Curriculum Comparison CS versus CS+GGIS at UIUC

(updated at May 31, 2025)

UIUC 2025-2026 Academic Calendar

(updated at May 26, 2025)

IU (아이유) appeared at Mask Singer with Violet Fragrance (보라빛 향기)

(updated at Apr 17, 2025)

What is Model Context Protocol (MCP)? How to build AI Agents?

(updated at Apr 17, 2025)

송소희(Song Sohee) - Not a Dream

(updated at Apr 08, 2025)

DOH KYUNG SOO & LEE SUHYUN - Rewrite The Stars cover

(created at Apr 08, 2025)

😲😭 디오(D.O.) - 후라이의 꿈 + Rewrite the stars(with. 수현)

(created at Apr 08, 2025)

D.O. (도경수) & IU (아이유) - Love Wins All | IU’s Palette (아이유의 팔레트)

(updated at Apr 08, 2025)

Lie - Legend song by BIGBANG

(updated at Feb 26, 2025)

Happy New Year Message with Mathematical Equations

(updated at Jan 02, 2025)

Life Quotes from Google CTO Will Grannis emphasizes the importance of data and the problem definition

(updated at Dec 17, 2024)

Life Quotes from Netflix CTO Elizabeth Stone in 2023

(updated at Dec 17, 2024)

Exploring UC Irvine (aka UCI) - School and its Majors

(updated at Dec 13, 2024)

Understanding Rose-Hulman Institute of Technology

(updated at Dec 13, 2024)

Chilling Acrobatic Taekwondo! The Birth of a Poomsae Prodigy - Byeon Jae-yeong Wins 1st Place at the Hong Kong World Poomsae Championships

(created at Dec 12, 2024)

IU's breathtakingly beautiful "eight" live performance, captivating the hearts of the audience with her dazzling vocals

(created at Dec 10, 2024)

Navigation for UMass Amherst (aka University of Massachusetts Amherst) - Campus Life and Underground Majors

(updated at Dec 10, 2024)

Exploring UC San Diego (aka UCSD) - School and its Majors

(updated at Dec 10, 2024)

How to access websites blocked by ESNI and ECH settings with Firefox!

(updated at Nov 29, 2024)