Send JSON and Handle Errors with jQuery $.ajax()

Problem and takeaway

You need to send structured data to a web API from a page that already loads jQuery, and you must know when the request succeeds or fails. Using $.ajax() without the correct content type or without error handling can send data the server rejects or silently swallow failures.

Takeaway: set contentType: 'application/json', stringify the payload with JSON.stringify(), declare dataType: 'json', and attach .fail() to handle HTTP errors and network problems.

Prerequisites

• jQuery 3.6 or later loaded on the page, for example through a CDN script tag.
• A target API endpoint that accepts JSON and returns JSON.
• Browser developer tools open to the Network and Console tabs.
• Permission to run JavaScript in the page context, such as site ownership or console access.

Send a JSON payload with $.ajax()

Run this in a page script or browser console after jQuery has loaded. Replace https://api.example.com/v1/events with your actual endpoint.

const endpoint = 'https://api.example.com/v1/events';
const payload = { name: 'deploy', status: 'started', environment: 'staging' };

$.ajax({
  url: endpoint,
  method: 'POST',
  contentType: 'application/json',
  dataType: 'json',
  data: JSON.stringify(payload),
  timeout: 10000
})
.done(function (data, textStatus, jqXHR) {
  console.log('Request accepted:', data);
  console.log('HTTP status:', jqXHR.status);
})
.fail(function (jqXHR, textStatus, errorThrown) {
  console.error('Request failed:', textStatus, errorThrown);
  console.log('HTTP status:', jqXHR.status);
});

JSON.stringify() converts a JavaScript object into a JSON string. contentType tells the server how to interpret the request body. dataType: 'json' tells jQuery to parse the response body as JSON and pass the resulting object to the success handler. jqXHR is jQuery's wrapper around the native XMLHttpRequest object.

Handle errors explicitly

HTTP errors such as 400 or 500 trigger .fail(), as do network failures and timeouts. Use jqXHR.status to distinguish between them.

textStatus	Likely cause
'error'	Server returned a non-2xx HTTP status.
'timeout'	Request exceeded the timeout value.
'abort'	Request was manually aborted.
'parsererror'	Response could not be parsed as JSON.

Verify the request in developer tools

1. Open the Network tab before running the code.
2. Run the $.ajax() call.
3. Look for the request to your endpoint. A successful call shows a 2xx status and a JSON response body.
4. Open the Console tab. Confirm the success handler logged the parsed object, not a string.
5. If the request is missing or red, check the Console for CORS or mixed-content warnings.

Limitations

• Cross-origin requests require the server to send CORS headers; jQuery cannot bypass browser restrictions.
• Older browsers such as Internet Explorer 8 and earlier lack full support for modern jQuery AJAX features.
• processData: false should not be used with a JSON string unless you also adjust contentType; it can prevent the body from being sent correctly.
• Default timeout is unlimited in many environments; always set timeout for user-facing requests.

Recovery options when a request fails

• For transient failures, retry with a short delay. Avoid blind retries for POST requests unless the endpoint supports idempotency keys, because a retry may duplicate the action.
• Show a user-facing message when textStatus is 'timeout' or 'error'.
• Log jqXHR.status and errorThrown to correlate frontend failures with server logs.

Practical check

After implementation, open the Network tab, filter by your endpoint, and confirm the request header Content-Type is application/json and the response tab contains valid JSON. If the Console shows a parsed object in the success handler, the configuration is working.