JQuery object method .load() is made for loading HTML content from server into a specific JQuery object or a set of JQuery objects (such as $("div1")).

Consider the following scenarios

  • What if, the response from server is not HTML?
  • What if, you do not actually wish to populate any content into any part of your web page? You may just to disable some buttons or add some menus when browser receives reply from the server?
  • What if, you just want to send some data back to server, such as user preferance setting and you do not wish to respond back to user?
  • What if, you are expecting not HTML but XML, JSON, Javascript from server?

JQuery.get() or $.get() and JQuery.post() or $.post(), on the other hand, are more versatile utilities that you could use.

You get to decide what to do with server response, you may also choose to do nothing with it. You have the callback function at your disposal to perform all sort of tasks on webE browser. Furthermore, from the response of the server, you get to tell the web browser if the data from the response is html, xml, json, javascript or jsonp (cross-domain json).

Unlike .load() that decides on your behalf, whether to use HTTP GET or HTTP POST to make request to server, JQuery.get() only use HTTP GET and JQuery.post() only use HTTP POST.

$.get(url, data, callback, type)

Similar to .load(), the only parameter you MUST supply is url and it can be as simple as :-

$.get( "demo.php" );
Parameters Type Description
url String The URL of the server-side resource to contact via the GET 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(). The string will be used as query string of url to be sent to the server.

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"] }
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.

Let's see JQuery.get() in action!

For this demo, I created 2 buttons, the first button says "Quentin Tarantino's movies" and the second says "Woody Allen's movies" (Woody Allen has lot more movies than this, those are what I've watched). The moment you mouseover or click or tap a button, a function triggers $.get() to fetch a json file from server.

I'll just pass 2 parameters to $.get(url, callback), url being the json file.

Check out the 2 json files

  1. quentin.json
  2. woodyallen.json

With the JSON file responded from server, I wrote a callback function to populate the json file into a table. in "div1".

This is how Javascript as below, I don't pass any data to server, I just passed 2 paramters to $.get() - $.get(url,callback).

  1. url being the json file resides in server.
  2. callback is a function that parse json file and populate as HTML table and change the color of the button

JQuery is smart enough to know it is a JSON, therefore, I do not specify "json" as third parameter. You may notice I have only passed two parameters to $.get(). First one being url and second one is the callback function.

<script>
    quentin's button
    $("#btn-quentin").mouseover(
        function()
        {
            $.get("https://www.ajax-tutor.com/demo/quentin.json",function(resp,status)
                {
                    $("#div1").html("");    //clear div1
                    $("#btn-woody").removeClass("alert"); //restore woody allen button back to blue

                    //turn response from server into table
                    var mydata = eval(resp);
                    var table = $.makeTable(mydata);
                    $(table).appendTo("#div1");

                    $("#btn-quentin").addClass("alert"); //turn quentin tarantino button to red
                });
        });

    woody's button
    $("#btn-woody").mouseover(
    function()
    {
        $.get("https://www.ajax-tutor.com/demo/woodyallen.json",function(resp,status)
            {
                $("#div1").html(""); //clear div1
                $("#btn-quentin").removeClass("alert"); //restore quentin tarantino button back to blue

                //turn response from server into table
                var mydata = eval(resp);
                var table = $.makeTable(mydata);
                $(table).appendTo("#div1");

                $("#btn-woody").addClass("alert"); //turn woody button button to red
            });
    });

    function that turns json into HTML table
    $.makeTable = function (mydata) {
        var table = $('<table>');
        var tblHeader = "<tr>";
        for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
        tblHeader += "</tr>";
        $(tblHeader).appendTo(table);
        $.each(mydata, function (index, value) {
            var TableRow = "<tr>";
            $.each(value, function (key, val) {
                TableRow += "<td>" + val + "</td>";
            });
            TableRow += "</tr>";
            $(table).append(TableRow);
        });
        return ($(table));
    };    
</script>