jsKjs Get jsKjs

Core · jQuery-compatible

AJAX with $.ajax

The familiar $.ajax() options, powered by fetch. Await it, or keep your success and error callbacks — both work. Try it against live PHP endpoints below.

Promises first, callbacks welcome

$.ajax() returns a native Promise, so await and try/catch just work. For migrating code it also accepts success, error and complete callbacks, and the promise carries .done(), .fail() and .always().

Options

url, method (or jQuery's type), data (object, FormData or string), json: true to send a JSON body, dataType ('json' or 'auto'), headers, timeout in milliseconds (aborts automatically), and credentials. Failed responses reject with an Error carrying .status and .data; the promise also exposes .abort().

Live · Request builder (real PHP endpoints)


  
  
View the source for this demo
HTML
<div class="grid g3" style="gap:12px">
  <div class="field"><label for="ax-method">Method</label>
    <select id="ax-method"><option>GET</option><option selected>POST</option><option>PUT</option><option>PATCH</option><option>DELETE</option></select></div>
  <div class="field"><label for="ax-url">Endpoint</label>
    <select id="ax-url">
      <option value="/api/echo.php?format=json">/api/echo.php — echoes your request</option>
      <option value="/api/users.json">/api/users.json — static JSON</option>
      <option value="/api/fail.php?code=404">/api/fail.php?code=404 — error</option>
      <option value="/api/slow.php?ms=2500">/api/slow.php — 2.5 s response</option>
    </select></div>
  <div class="field"><label for="ax-name">data.name</label><input id="ax-name" type="text" value="Ada"></div>
  <div class="field"><label for="ax-timeout">timeout (ms, blank = none)</label><input id="ax-timeout" type="number" min="0" step="100" placeholder="e.g. 1000"></div>
  <label style="align-self:end;padding-bottom:10px"><input id="ax-json" type="checkbox"> Send as JSON (<code>json: true</code>)</label>
  <div style="align-self:end"><button type="button" id="ax-send">Send request</button></div>
</div>
<p id="ax-status" aria-live="polite" style="margin:14px 0 0;font-weight:700"></p>
<pre class="out" id="ax-out"></pre>
JavaScript
$('#ax-send').on('click', async () => {
  const started = performance.now();
  $('#ax-status').text('Sending…');
  try {
    const data = await $.ajax({
      url: $('#ax-url').val(),
      method: $('#ax-method').val(),
      data: { name: $('#ax-name').val(), plan: 'pro' },
      json: $('#ax-json').val(),                       // checkbox .val() → boolean
      timeout: +$('#ax-timeout').val() || undefined,
    });
    $('#ax-status').html('<span class="yes">✓ OK</span> in ' + Math.round(performance.now() - started) + ' ms');
    $('#ax-out').text(typeof data === 'string' ? data : JSON.stringify(data, null, 2));
  } catch (err) {
    const why = err.name === 'AbortError' ? 'aborted by timeout' : 'HTTP ' + err.status;
    $('#ax-status').html('<span class="no">✗ ' + why + '</span>');
    $('#ax-out').text(err.data || err.message);
  }
});



  
More examples
async/await
JavaScript
try {
  const saved = await $.ajax({ url: '/api/items', method: 'POST', data: item, json: true, timeout: 5000 });
  render(saved);
} catch (err) {
  if (err.status === 422) showErrors(err.data);
}
jQuery-style callbacks still work
JavaScript
$.ajax({
  url: '/api/items', type: 'POST', data: { title: 'Hi' },
  success(data) { render(data); },
  error(err) { alert('Failed: ' + err.status); },
});
$.ajax('/api/ping').done(onPong).fail(onError).always(hideSpinner);

  
API
$.ajax(url | options [, options]) → Promise
Full-control requests. Options: url, method (or jQuery’s type), data (object → urlencoded or querystring; FormData; string), json: true (send JSON body), dataType (’json’ | ’auto’), headers, timeout (ms, auto-aborts), credentials, and callbacks success(data, status, res), error(err), complete(). The promise also has .abort().
Reference: $.ajax() →

  
Migrating
Coming from jQueryReturns a Promise rather than a jqXHR. $.ajaxSetup, prefilters, transports and JSONP are not included; set shared headers with a small wrapper function instead.

  
Related features
Core
$.get, $.post & $.getJSON
One-line GET, POST and JSON requests that return Promises: await $.getJSON(url), $.get(url, data), $.post(url, data) — live examples against real endpoints..
Open →Core
Timeouts, aborts & retries
Handle real-world network failure: HTTP errors with status codes, automatic timeouts, manual abort(), and a retry-with-backoff helper — demonstrated against live endpoints..
Open →Hyper
Declarative requests
Make GET, POST, PUT, PATCH and DELETE requests straight from HTML with kj-get, kj-post and friends — htmx-style hypermedia with zero JavaScript.
Open →