JQuery.get() has a twin sister by the name of JQuery.post(). Both are JQuery core method, they work almost the same except JQuery.get() makes HTTP GET request to server and JQuery.post() makes HTTP POST.

They both look alike and carry the same number of parameters JQuery.post(url, data, callback, type) and only "url" parameter is mandatory.

The difference is the treatment of data parameter, JQuery.get() will turn it into a query string. For example, if we pass url as http://www.example.com/movie.php and data as actor=jamie%20fox&director=quentine%20tarantino, JQuery.get() is going to make GET request:-

http://www.example.com/movie.php?actor=jamie%20fox&director=quentine%20tarantino

On the other hand, if you were to do the same with JQuery.post(), JQuery.post() will not turn the data into query string but post to server as HTTP Form data.

Parameters Type Description
url String The URL of the server-side resource to contact via the POST method.
data String or Object Pass as String. You would have ensure it is properly encoded. The JavaScript encodeURIComponent() method is handy for this, alternatively, you can JQuery.param(). "actor=jamie&director=quentine"

Pass as Object. Object in this context means associative array (it's also know as hash in other programming language) that stores key-value pairs. If you were to do so, JQuery willl take care the encoding bit for you.

Example of Object
{ firstName: "John", lastName: "Woo" }
{ "student[]": ["Jessica", "Susan"] }

Whether you pass it as String or Object, JQuery.post() will send HTTP POST to server, hence, there won't be query string such as "example.php?firstname=john&lastname=travolta" both String or Object will be post to server as Form Data.
callback Function Function invoked when the request completes successfully. Keyword here is "successfully". If it isn't successful, this function will not be called.

Function (response, status, xhr)

"response" is the The response body from server, it can be xml, html, text, json, script or jsonp.

"status" can be either "success", "notmodified" since this function only invoked when request is successful.

A third parameter contains a reference to the XHR instance.
type string How would you want the response body is to be interpreted? I can be "html", "text", "xml", "json", "script", or "jsonp".
If you don't specifiy any, JQuery examines the Content-Type header of the HTTP response. If the header includes the string "json", the data is parsed as JSON and so on.

JQuery.post() in action

Let's say you have got a game and you would like your user to choose their preferred level to play with. You have got to save the preference of user into database.

To do so, I am using JQuery Bar Rating to turn a HTML Select control into horizontal bar.

HTML code below shows HTML Select control and and div element "result1" for populating results. In real application, you unlikely need "result1".

The horizontal bar has clearly shows what user has chosen. You just need to save the level user chose into database using $.post() method of JQuery.

<link rel="stylesheet" href="https://www.ajax-tutor.com/css/bars-horizontal.css">

 <form id="form1">
    <select id="level" name="level">
        <option value=""></option>
        <option value="10">10</option>
        <option value="9">9</option>
        <option value="8">8</option>
        <option value="7">7</option>
        <option value="6">6</option>
        <option value="5">5</option>
        <option value="4">4</option>
        <option value="3">3</option>
        <option value="2">2</option>
        <option value="1">1</option>
    </select>
</form>
<p></p>
<div id="result1" class="panel"></div>

Javscritpt code is simple as below. Please notice that I've only passed 3 parameters to JQuery.post()

  1. url -- 'https://www.ajax-tutor.com/demo/level.php'
  2. data -- $("#form1").serializeArray()
  3. (learn more on serializeArray())
  4. callback -- function(resp){ $("#result1").append(resp); }
<script>
//turn HTML SELECT into horizontal bar
$(function()
{
    $("#level").barrating(
        {theme: 'bars-horizontal',reverse: true,}
        );

});

//change event of HTML SELECT to call $.post()
$("#level").change(
    function(){
        $.post() starts
        $.post(
            'https://www.ajax-tutor.com/demo/level.php', 
            $("#form1").serializeArray(), 
            function(resp){   
                $("#result1").append(resp);    
            }
            );
        $.post() ends
    });

</script>
                            

Level.php is as simple as :-

<?php
    if (intval($_POST['level'])>0) {
        echo 'You set level '.$_POST['level'].'
'; } ?>

What the PHP code does is to return "level" that post from front end web browser. For demo purpose, I do not write code to commit data into database.