jQuery Crash Course (Part 2): Mastering AJAX with jQuery

Welcome back to our jQuery Crash Course series! 🎉

In Part 1: jQuery Basics with Vite Part 1

we explored setting up a project, selectors, DOM manipulation, and event handling.

Now in Part 2, we’ll unlock one of the most powerful features of jQuery: AJAX (Asynchronous JavaScript and XML).

AJAX allows your web application to:

• Communicate with a server without reloading the page.
• Fetch data (like JSON or HTML) dynamically.
• Build interactive, modern web experiences.

What is AJAX in jQuery?

AJAX in jQuery is a set of methods that make it easier to send HTTP requests and process responses. Instead of writing long boilerplate with XMLHttpRequest or even fetch(), you can do it in just a few lines.

Example:

Vanilla fetch

fetch("data.json")
  .then((response) => response.json())
  .then((data) => console.log(data));

jQuery AJAX

$.get("data.json", function (data) {
  console.log(data);
});

Setting Up

We’ll continue from the Vite + jQuery project we built in Part 1. Make sure you still have jQuery installed:

npm install jquery

Import it in your main.js (if not already):

import $ from "jquery";

The Core jQuery AJAX Methods

jQuery offers several AJAX helpers:

• $.ajax(): The full-featured method (most customizable).
• $.get(): Simplified method for GET requests.
• $.post(): Simplified method for POST requests.
• $.getJSON(): Shortcut for fetching JSON data.

Example 1: Simple GET Request

Imagine you have a data.json file:

{
  "name": "Safi",
  "role": "Developer",
  "skills": ["JavaScript", "jQuery", "AJAX"]
}

Here’s how you fetch it:

$.get("data.json", function (data) {
  $("#output").html(`
    <h2>${data.name}</h2>
    <p>Role: ${data.role}</p>
    <p>Skills: ${data.skills.join(", ")}</p>
  `);
});

👉 When the page loads, it retrieves the data and displays it dynamically.

Example 2: POST Request (Sending Data)

Let’s simulate sending form data to a server.

<form id="contactForm">
  <input type="text" id="name" placeholder="Your Name" />
  <button type="submit">Submit</button>
</form>
<div id="response"></div>

$("#contactForm").submit(function(e) {
  e.preventDefault();

  const name = $("#name").val();

  $.post("/api/submit", { name }, function(response) {
    $("#response").text("Server says: " + response.message);
  });
});

👉 The form submits without refreshing the page.

Example 3: Using $.ajax() for Full Control

For more advanced use cases:

$.ajax({
  url: "/api/data",
  type: "GET",
  dataType: "json",
  success: function (data) {
    console.log("Success:", data);
  },
  error: function (xhr, status, error) {
    console.error("Error:", error);
  },
  complete: function () {
    console.log("Request completed");
  },
});

This gives you hooks for success, error, and complete.

Example 4: Loading External HTML

Want to pull in external HTML snippets?

$("#loadBtn").click(function () {
  $("#content").load("snippet.html");
});

👉 This is handy for loading partial views like menus, modals, or blog sections dynamically.

Handling JSON Data

Often, APIs return JSON. jQuery makes it seamless:

$.getJSON("https://jsonplaceholder.typicode.com/posts/1", function (post) {
  $("#output").html(`
    <h3>${post.title}</h3>
    <p>${post.body}</p>
  `);
});

👉 With just a few lines, you’re consuming a real API.

Why Use jQuery AJAX Today?

While modern apps often use fetch() or Axios, jQuery AJAX still shines for:

• Legacy Projects: Many CMS platforms (WordPress, Drupal, etc.) rely on jQuery.
• Prototyping: Easy to set up and fast to test.
• Plugins: Tons of jQuery plugins use AJAX internally.

If you’re working with existing codebases, knowing jQuery AJAX is a must.

Conclusion

You now know how to:

• Use $.get(), $.post(), and $.ajax() to communicate with servers.
• Fetch JSON data and display it dynamically.
• Submit forms without reloading the page.
• Load external HTML content seamlessly.

👉 If you missed Part 1 (jQuery Basics), check it out here: Read Part 1

And don’t miss Part 3 where we’ll bring interactivity to the next level!

🤝 Need a Custom RSVP System or Dashboard?

I help businesses build tools that actually work , even on tight deadlines.

Whether you're planning an event, need internal tools, or want a custom dashboard for your team , I can help.

Reach out

📧 Email: safi.abdulkader@gmail.com | 💻 LinkedIn: @abdulkader-safi | 📱 Instagram: @abdulkader.safi | 🏢 DSRPT

Drop me a line, I’m always happy to collaborate! 🚀