HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ajaxError thrownError status</title>
  <style>
    body { font-family: sans-serif; padding: 16px; max-width: 540px; }
    button { display: block; margin-bottom: 10px; padding: 8px 14px; cursor: pointer; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; text-align: left; }
    #details { margin-top: 12px; padding: 12px; background: #fef2f2; border-radius: 6px; font-size: 14px; line-height: 1.7; font-family: ui-monospace, monospace; }
    .hint { color: #64748b; font-size: 13px; margin-top: 8px; }
  </style>
</head>
<body>
  <button type="button" id="not-found">404 Not Found</button>
  <button type="button" id="server-error">500 Internal Server Error</button>
  <div id="details">Click a button to trigger a failing request.</div>
  <p class="hint">thrownError is the HTTP status text; jqXHR.status is the numeric code.</p>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  <script>
    $(document).on("ajaxError", function(event, jqXHR, settings, thrownError) {
      $("#details").html(
        "<strong>URL:</strong> " + settings.url + "<br>" +
        "<strong>jqXHR.status:</strong> " + jqXHR.status + "<br>" +
        "<strong>thrownError:</strong> " + thrownError
      );
    });

    $("#not-found").on("click", function() {
      $.get("https://httpbin.org/status/404");
    });

    $("#server-error").on("click", function() {
      $.get("https://httpbin.org/status/500");
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

jQuery ajaxError — thrownError and jqXHR.status (Try It)