Question

I don’t really understand how ajax works, but I have seen tutorials that allow me to change a div to a web page by clicking on a button.

Is there a way to load the clicked link into the div tag without refreshing, by reading the attributes within the <a> tag?

I have the following HTML:

<table align='center'>
    <tr>
        <td>
            <a href='http://libraryofalexandria.tk/index.php'>Home</a>
        </td>
        <td>
            <a href='http://libraryofalexandria.tk/pdfupload.php'>Book Upload</a>
        </td>
        <td>
            <a href='http://libraryofalexandria.tk/booksearch.php'>Book search</a>
        </td>
    </tr>
</table>
<div id='pageLoad'></div>

​​​​​​​​​​​​

Answer 1

Yes, you can use jQuery’s .load() method to do that.

It would be something like this:

// Catch the click on your a tag
$("a").click(function(){
    // Load the content of the page referenced in the a-tags href
    $("#pageLoad").load($(this).attr("href"));
    // Prevent browsers default behavior to follow the link when clicked
    return false;
});

It is worth to note that accessing data from other domains are restricted by the same origin policy. From the jQuery documentation of .load():

Due to browser security restrictions, most “Ajax” requests are subject
to the same origin policy; the request can not successfully retrieve
data from a different domain, subdomain, or protocol.

If that is the case, you might have to look into CORS or JSONP.