jQuery post() Method

What You’ll Learn

$.post() is jQuery’s readable POST shorthand. This tutorial covers both official signatures, how it maps to $.ajax(), sending data in the request body, the success callback arguments, parsing JSON with the fourth dataType argument, form submission with .serialize(), chaining .done(), .fail(), and .always() on the returned jqXHR, the settings-object form since jQuery 1.12, never-cached POST behavior, and when to upgrade to full $.ajax().

Introduction

Creating a comment, saving a profile, submitting a contact form — these operations send data to the server, not just read from it. jQuery makes that one line with $.post(). Pass a URL and a data object; jQuery sends an asynchronous HTTP POST request with the payload in the request body and invokes your callback when the server responds successfully.

Under the hood, $.post() is not a separate transport — it is a thin wrapper around jQuery.ajax() with type: "POST" preset. That means you inherit the same jqXHR return value, global Ajax events on document, and Promise-style chaining. POST requests are never cached, so every call hits the server fresh. When your needs outgrow a one-liner — JSON bodies, custom headers, or global: false — you drop down to $.ajax() without changing mental models.

Understanding jQuery.post()

jQuery.post() sends data to a server using an HTTP POST request. The method returns immediately with a jqXHR object while the network call runs in the background. If you pass a success function, jQuery calls it with the response body once parsing completes — the exact type depends on the optional dataType argument or jQuery’s intelligent guess from the Content-Type header.

The optional data argument is a plain object, string, or serialized form string sent in the request body — ideal for form fields, create/update payloads, and search terms you do not want visible in the URL. Unlike GET query parameters, POST body data is not bookmarkable and should be used for writes and sensitive input.

📝 Syntax

The official jQuery API accepts two signatures:

1. Positional arguments — jQuery.post( url [, data ] [, success ] [, dataType ] )

jQuery.post( url [, data ] [, success ] [, dataType ] )

The classic form — URL first, optional body data, optional success callback, optional expected response type. When providing dataType without data, pass null or undefined as the second argument (required in jQuery 3.x).

2. Settings object — jQuery.post( [ settings ] ) (since jQuery 1.12)

jQuery.post( [ settings ] )

Pass a single settings object. All $.ajax() options except url are optional; jQuery sets type to "POST" automatically.

Equivalence to $.ajax()

These two calls are identical:

// Shorthand
$.post( url, data, success, dataType );

// Expanded — what jQuery does internally
$.ajax( {
  url: url,
  data: data,
  success: success,
  dataType: dataType,
  type: "POST"
} );

success callback signature

• data — parsed response: XML root, string, HTML fragment, or JSON object depending on dataType and MIME type.
• textStatus — string such as "success" when the request completes without transport errors.
• jqXHR — the same jqXHR object returned by $.post(); inspect jqXHR.status for the HTTP status code.

Return value

• $.post() returns a jqXHR object — chain .done(), .fail(), and .always().
• Handlers can be attached after the request completes; jQuery fires them immediately if already finished.
• Deprecated jqXHR methods .success(), .error(), and .complete() were removed in jQuery 3.0 — use .done() / .fail() / .always().
• Call jqXHR.abort() to cancel an in-flight POST request.

Examples Gallery

Five progressive examples from a basic POST with body data through JSON responses, serialized form submission, Ajax form handling with preventDefault, and jqXHR chaining. Each links to a Try-it lab where you can edit and run the code in the browser.

$( "#save" ).on( "click", function() {
  $.post(
    "https://jsonplaceholder.typicode.com/posts",
    {
      title: "My new post",
      body: "Created with $.post()",
      userId: 1
    },
    function( data, textStatus, jqXHR ) {
      $( "#result" ).html(
        "<strong>Created post #" + data.id + "</strong><br>" +
        data.title + " <small>(" + textStatus + ", HTTP " + jqXHR.status + ")</small>"
      );
    }
  );
} );

Click #save → POST /posts with title, body, userId in request body

JSONPlaceholder returns created object with id → #result shows "Created post #101"

HTTP 201 Created (or 200) — success callback runs with parsed JSON

$.post(
  "https://jsonplaceholder.typicode.com/posts",
  { func: "createPost", title: "Hello", body: "World", userId: 1 },
  function( data ) {
    console.log( data.id );    // 101 (mock server assigns id)
    console.log( data.title ); // "Hello"
    $( "#json-out" ).text( "id=" + data.id + ", title=" + data.title );
  },
  "json"
);

POST with dataType "json" → body parsed before callback

#json-out shows "id=101, title=Hello"

typeof data in callback is "object" — not a raw string

$( "#submit-form" ).on( "click", function() {
  var payload = $( "#contact-form" ).serialize();
  // e.g. "name=John&email=john%40example.com&message=Hello"

  $.post(
    "https://jsonplaceholder.typicode.com/posts",
    payload,
    function( data ) {
      $( "#status" ).text( "Saved! Server assigned id " + data.id );
    },
    "json"
  );
} );

serialize() reads named form fields → URL-encoded string

$.post sends string as POST body (already encoded)

#status shows "Saved! Server assigned id 101"

$( "#searchForm" ).on( "submit", function( event ) {
  event.preventDefault();

  var $form = $( this ),
    term = $form.find( "input[name='s']" ).val(),
    url = $form.attr( "action" );

  var posting = $.post( url, { s: term } );

  posting.done( function( data ) {
    $( "#result" ).empty().append(
      "<p>Search sent: <strong>" + term + "</strong></p>" +
      "<pre>" + JSON.stringify( data, null, 2 ) + "</pre>"
    );
  } );
} );

User submits form → preventDefault stops page reload

$.post sends { s: term } in body → .done() updates #result in place

Page stays on same URL — no full navigation

var jqxhr = $.post( "https://jsonplaceholder.typicode.com/posts", {
  title: "Chained handlers",
  body: "done, fail, always",
  userId: 1
} )
  .done( function( data, textStatus, jqXHR ) {
    $( "#log" ).append( "<li>done: id " + data.id + " (" + textStatus + ")</li>" );
  } )
  .fail( function( jqXHR, textStatus, errorThrown ) {
    $( "#log" ).append( "<li>fail: " + textStatus + "</li>" );
  } )
  .always( function() {
    $( "#log" ).append( "<li>always: request finished</li>" );
    $( "#spinner" ).hide();
  } );

// Attach more handlers later — fires immediately if already complete
jqxhr.always( function() {
  console.log( "Second always handler" );
} );

Success → #log shows done + always entries; #spinner hidden

Server error → fail + always run; done skipped

Second .always() attached later still fires (or immediately if done)

🚀 Common Use Cases

• Form submission — POST contact, login, or signup forms without a full page reload.
• Create records — send new blog posts, comments, or cart items to a REST API.
• Inline edits — save a field when the user blurs an input or clicks Save.
• Vote / like buttons — POST a user action and update the UI from the JSON response.
• Search with POST — send large or sensitive filter payloads in the body instead of the URL.
• Delete confirmations — POST or use full $.ajax({ method: "DELETE" }) after user confirms.

📝 Notes

• $.post() is asynchronous — code after the call runs before the server responds.
• It is shorthand for $.ajax() with type: "POST" — same jqXHR, same global Ajax events.
• Never cached: POST requests always hit the server; cache and ifModified in ajaxSetup are ignored.
• Body encoding: plain objects serialize via $.param(); pass a string from .serialize() for pre-encoded form data.
• JSON APIs: for application/json bodies use $.ajax({ contentType: "application/json", data: JSON.stringify(obj) }) — $.post() defaults to form encoding.
• Prefer .done() / .fail() / .always() over deprecated jqXHR methods removed in jQuery 3.0.
• Same-origin: most Ajax POST requests require CORS headers for cross-domain URLs.
• When providing dataType without data, pass null as the second argument in jQuery 3.x.

💡 Best Practices