jQuery AJAX: A Complete Guide with Real Examples

Long before fetch existed, jQuery's $.ajax was how the web talked to servers without reloading. It still works fine — and if you're maintaining a legacy app, knowing it well saves hours.

Simple GET and POST

$.get('/api/users', function (data) {
  console.log(data);
});

$.post('/api/users', { name: 'Ada' }, function (res) {
  console.log('Saved', res);
});

$.ajax — the full toolbox

$.ajax({
  url: '/api/users',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Ada' }),
  dataType: 'json',
  timeout: 10000
})
  .done(res => console.log(res))
  .fail((xhr, status, err) => console.error(status, err))
  .always(() => hideSpinner());

Loading JSON the short way

$.getJSON('/api/posts').done(posts => render(posts));

Sending form data

$('#myForm').on('submit', function (e) {
  e.preventDefault();
  $.post('/save', $(this).serialize(), () => alert('Saved!'));
});

Error handling that doesn't swallow problems

• Always attach a .fail() or error callback
• Set a sensible timeout — networks fail silently otherwise
• Show the user something when a request fails — not just a silent log

Migrating to fetch

// jQuery
$.get('/api/users').done(render);

// fetch equivalent
fetch('/api/users')
  .then(r => r.json())
  .then(render);