Core Features

AJAX

Load data asynchronously from a server without reloading the page using jQuery AJAX.

What is AJAX?

AJAX (Asynchronous JavaScript and XML) lets you load data from a server in the background without refreshing the page. jQuery makes AJAX extremely simple.

jQuery AJAX Methods

  • $.ajax() — full-featured, low-level
  • $.get() — shorthand for GET requests
  • $.post() — shorthand for POST requests
  • $.getJSON() — shorthand for GET + JSON parsing
  • .load() — load HTML from server into element

Handling Responses

Use .done(), .fail(), and .always() callbacks (or the older success and error options).

Example

javascript
// Simple GET request
$.get("/api/users", function(data) {
  console.log(data);
});

// GET with parameters
$.get("/api/users", { page: 1, limit: 10 }, function(users) {
  users.forEach(user => {
    $("ul").append(`<li>${user.name}</li>`);
  });
});

// POST request
$.post("/api/users", { name: "Alice", email: "alice@example.com" },
  function(response) {
    console.log("Created:", response);
  }
);

// Full $.ajax() - most control
$.ajax({
  url: "/api/users/1",
  method: "PUT",
  contentType: "application/json",
  data: JSON.stringify({ name: "Updated Name" }),
  success: function(response) {
    console.log("Updated:", response);
  },
  error: function(xhr, status, error) {
    console.error("Error:", error);
  }
});

// Using Promises (jQuery 3+)
$.getJSON("/api/products")
  .done(function(products) {
    products.forEach(p => {
      $(".products").append(`<div class="product">${p.name}</div>`);
    });
  })
  .fail(function(xhr) {
    $(".error").text("Failed to load: " + xhr.status);
  })
  .always(function() {
    $(".spinner").hide();
  });

// Load HTML into element
$(".sidebar").load("/sidebar.html");
$(".content").load("/page.html #main-content");
Try it yourself — JAVASCRIPT