HTML CSS JAVASCRIPT JQUERY LIQUID

jQuery - AJAX load() Method(code error)

❮ Previous Next ❯

jQuery load() Method

The jQuery method called load() is a useful tool for making things happen on a website using AJAX.

The load() function fetches information from a server and places it inside the chosen element.

Syntax:

$(selector).load(URL,data,callback);

The 'required' URL parameter tells the web browser which web address you want it to visit.

The "data" part you can choose to include or not, helps you specify some extra information in the form of key-value pairs. This information will be sent together with your request.

The optional callback parameter is a function's name that runs once the load() action is finished.

This is what's inside our sample file named "demo_test.txt"

<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>

This example demonstrates how to put the contents of the file "demo_test.txt" inside a particular <div> element, keeping its original dimensions (width and height).

You can include a jQuery selector in the URL parameter as well.

Here is a simpler explanation: In this example, we take the stuff inside the element with the ID "p1" from the file named "demo_test.txt" and put it into a particular <div> element with the same size as before.

The "callback" part you can add is like a special job that happens after the load() work is finished. This special job can be told to do different things, and it can take some information as well.

  • responseTxt - contains the resulting content if the call succeeds
  • statusTxt - contains the status of the call
  • xhr - contains the XMLHttpRequest object

In this example, you'll see a message box pop up once the 'load()' method finishes its task. If the 'load()' method works well, it will show 'External content loaded successfully!' in the message box. But if something goes wrong, it will display an error message instead.
❮ Previous Next ❯