The JQuery object method .load() has 3 parameters (url,data,callback), only "url" is mandatory. "data" and "callback" are both optional. Let's look into the data parameter.

The "data" parameter is to append to the url OR to send a long with the request. The data parameter can be string or object.

If "data" is string, it will be used as query string which will be appended to the url. For example, a string "movie=birdman" would become query string "?movie=birdman" and append to the url.

In this case, the data parameter is a string, the request of .load() is made using HTTP GET method.

On the other hand, if "data" is object, the request of .load() will be made using HTTP POST method and data will be "POST" together with the request to server.

To demonstrate query string, I have turned my demo HTML page (emma.html) in the previous topic into a PHP page (emma.php). "emma.php" expects query string of movie title so to return the "div" of the requested movie.

emma.php?movie=birdman would return the text of "Birdman". Try this link

The HTML page structure remains very much the same.

<!-- left menu START -->     
<div class="row">
    <div class="medium-2 columns panel">
        <ul class="side-nav">
            <li id="item-birdman"><a href="#">Birdman (2014)</a></li>
            <li id="item-the-help"><a href="#">The Help (2011)</a></li>
            <li id="item-spiderman"><a href="#">The Amazing Spider-Man 1&2 (2012/4)</a></li>
            <li id="item-magic"><a href="#">Magic in the Moonlight (2014)</a></li>
            <li id="item-crazy"><a href="#">Crazy, Stupid, Love. (2011)</a></li>
<!-- left menu END -->  
<!-- content START -->    
    <div id="content" class="medium-10 columns panel">
        <div class=" radius">CONTENT</div>
<!-- content END -->   

As of the JQuery code, you may notice there are second arguments in string such as 'movie=birdman' added into the .load() method.

The .load() method will be able to turn movie=birdman into ?movie=birdman. Not only that, it will also encode a "space" into %20, it turns movie=the help into ?movie=the&20help and append to the url.

    $("#item-birdman").click(function() {$("#content").load('','movie=birdman');});
    $("#item-the-help").click(function() {$("#content").load('','movie=the help');});
    $("#item-spiderman").click(function() {$("#content").load('','movie=spiderman');});
    $("#item-magic").click(function() {$("#content").load('','movie=magic');});
    $("#item-crazy").click(function() {$("#content").load('','movie=crazy');});
    $("#item-all").click(function() {$("#content").load('');});    

Now, how do we know whether GET or POST method were used by web browser to make request to server?

Modern web browsers these days like Firefox, Chrome, Opera or Microsoft Edge all come with Developer Tool for troubleshooting. Below screenshot was captured from Google Chrome with Developer Tool turned on to inspect network activity. As you can clearly see, the request methods are "GET".

Now, try out the demo below.

What if you have multiple parameters to be in query string?

If you wish the request to server to be emma.php?movie=birdman&year=2014, you would have to add an ampersand "&" in between of two parameters to separate them .load("","movie=birdman&year=2014").

You may also ask, what if I don't pass a string as second parameter, can I just append the query string to the url instead? The answer is of course, "Yes".

.load("emma.php","movie=birdman") is exactly the same as .load("emma.php?movie=birdman").

As you have noticed earlier, JQuery .load() encode the URI for our convenience, if you were to construct the url with query string yourself, you will have to make sure the url is properly encoded. The Javascript encodeURIcomponet() and core JQuery method $.param() are made exactly for this purpose.

As a side note, encodeURIcomponet(), encodeURI() and escape() are 3 Javascript functions that sounds similar but work rather differently. You may check out this article ( which explains the differences pretty clearly.