← Back to jQuery Course | Chapter 9: AJAX Basics | Lesson 3 of 7

HTTP GET with get()

The get method sends an HTTP GET request. It is commonly used to read data from a server.

In this page:

  1. What is get()?
  2. GET with Query Parameters
  3. GET Success Callback
  4. GET Error Handling
  5. Small GET Project
Syntax
javascript 
$.get(url, data, function (response) {
  // handle response
}, dataType);

What is get()?

$.get() is a shorthand for making a GET-style AJAX request, most often used to read data from a server without modifying anything server-side. It's a simplified version of $.ajax() for the common case of just fetching data.

Example: What is get()?

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.get("data.php", function(data) {
        $("#output").text(JSON.stringify(data));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

GET with Query Parameters

GET requests can send data as query parameters appended to the URL, and jQuery can build that query string automatically from a plain object passed as get()'s second argument. This is the standard way to pass filters or search terms to a read-only endpoint.

Example: GET with Query Parameters

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.get("data.php", {category: "books", limit: 5}, function(data) {
        $("#output").text(JSON.stringify(data));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

GET Success Callback

The success callback receives the data returned by the server, which you can then use to update the page with jQuery -- populating a list, filling in text, or building a table. The callback only runs if the request actually succeeds.

Example: GET Success Callback

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <ul id="list"></ul>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();
    $(document).ajaxError(function(event, xhr, settings) {
      $("#output").append($("<div>").text("Request failed: " + settings.url));
    });

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.get("data.php", function(data) {
        $("#list").append("<li>" + data.message + "</li>");
      });
    });

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

GET Error Handling

A GET request can fail due to network issues or a server error, and chaining .fail() onto the request lets you handle that case cleanly instead of leaving the failure unnoticed. This is especially important for requests triggered by user actions, where silent failure would be confusing.

Example: GET Error Handling

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
  </style>
</head>
<body>
  <button id="runBtn">Run</button>
  <button id="resetBtn">Reset</button>
  <div id="output"></div>
  <script>

    $("#runBtn").click(function() {
      $("#output").empty();
      $("#output").append($("<div>").text("Sending request..."));
      $.get("data.php").done(function(data) {
        $("#output").append($("<div>").text(JSON.stringify(data)));
      }).fail(function() {
        $("#output").append($("<div>").text("Request failed"));
      });
    });

    $("#resetBtn").click(function() {
      jQuery(document).off();
      $("#output").empty();
    });
  </script>
</body>
</html>

Small GET Project

The get() method is a good choice for simple read-only requests, like fetching a list of items or checking a status, since it keeps the code shorter than writing out a full $.ajax() configuration object. Reach for the full ajax() method only when you need options get() doesn't expose.

Example: Small GET Project

javascript 
<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <style>
    button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
    #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
    #output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; }
    #demo :where(p, div, span, li, h1, h2, h3, h4, td, th, blockquote, label, section, article, aside) { border:1px solid #4a7fb5; background:#eaf2fb; padding:6px 10px; margin:4px 0; border-radius:4px; }
    #demo :where(ul, ol) { border:1px dashed #888; background:#fafafa; padding:8px 8px 8px 32px; margin:6px 0; }
    #demo :where(table) { border-collapse:collapse; }
    #demo :where(td, th) { border-radius:0; }
    #demo :where(input, select, textarea) { margin:4px 0; }
  </style>
</head>
<body>
  <button id="resetBtn">Reset</button>
  <section id="demo">
    <button id="checkStatus">Check Status</button>

  </section>
  <div id="output"></div>
  <script>
    var original = $("#demo").html();

    function init() {
      $("#checkStatus").on("click", function() {
        $.get("data.php", function(data) {
          $("#output").append($("<div>").text("Status: " + data.status));
        });
      });
    }
    init();

    $("#resetBtn").click(function() {
      $("#demo").html(original);
      $("#output").empty();
      init();
    });
  </script>
</body>
</html>
Related Topics

HTTP POST with post() · Loading Content with load() · Introduction to AJAX · Parsing JSON with getJSON()

{# common_mistakes/chapter_summary/browser_support: on Hindi pages the view already swaps in the hi_ translation fields (or blanks these out if untranslated), so this renders correctly for both languages without a lang_code check here. #}
Common Mistakes
  1. Writing const data = $.get("data.php") and using data as the response, when it is a jqXHR object and the real data arrives in the callback.
  2. Building the query string by hand such as "data.php?name=" + name without encoding, when passing an object like { name: name } lets jQuery encode it correctly.
  3. Expecting $.get() to work for a file on another domain, when the browser's same-origin policy blocks it without CORS.
🔒

Chapter Quiz — Complete all 7 topics to unlock

0/7 topics done

Complete these topics first:

← Previous Lesson Loading Content with load() Next Lesson → HTTP POST with post()

Login to run this code

C/C++/Java/PHP execution requires a free account. Your code is saved — you'll land right back in the editor after logging in.