JQuery load to get data from file or url by using POST or GET method and displaying in div element

We can fetch the content returned by any URL or page by using load(). Here we have one display layer with id =d1, to the same layer we will load with a file loat-text.php.

Here is the inline code with the button to load external file load-text.php.

<button type="button" class="btn btn-info" onclick=$("#d").load("load-text.php");>Load Page</button>
<div id='d'></div>

Inside load-text.php file we have only one line of text

<i>This message is from load-text.php file</i>

Passing variable while loading the file using GET method

load function with data from backend script

We can pass variable to our file and then read them back. Here we have used in PHP file load-text1.php file to collect the parameter and return the same. Now we will use JQuery code to load the url with parameter on Button Click.

HTML

<button type="button" class="btn btn-info" id=b1>Load Page</button> 
 <div id='d1' ></div>

JQuery

<script>
$(document).ready(function() {
$("#b1").click(function(){
$("#d1").load("load-text1.php?msg=Hello_world");
})
})
</script>

encodeURIComponent()

When we have blank space , / ? : @ & = + $ # as part of the string then we can use encodeURIComponent() to encode the data before sending in query string.

var msg=encodeURIComponent("Hello World");
$("#d1").load("load-text1.php?msg="+ msg);

Our backend file load-text1.php code is here

<?Php
$msg=$_GET['msg'];
echo "This is from load-text1.php file with Message : $msg ";
?>

POST method

In the above code it has used GET method to post data to backend script, to use POST method we have to use object to post data. We will create object by reading two text boxes as first name and last name. We will use them to post data to backend , you can read more on how to read data entered in a text box.

We have used load-text2.php file to receive data from POST method. Then same data is retuned with a welcome message.

First Name

Last Name

HTML

First Name<br><input type=text name=t1 id=t1>  Last Name<br><input type=text name=t2 id=t2>  <br><button type="button" class="btn btn-info" id=b2>Load Page</button> 
 <div id='d2' ></div>

JQuery

<script>
$(document).ready(function() {
$("#b2").click(function(){
str1=$('#t1').val();
str2=$('#t2').val();
$("#d2").load("load-text2.php", {'t1':str1,'t2':str2});
})
})
</script>

Our Backend script load-text2.php file code is here

<?Php
$t1=$_POST['t1'];
$t2=$_POST['t2'];
echo "Welcome $t1 $t2";
?>

Using Callback function

While loading the page we can use callback function to check status of the script. Here

HTML

<button type="button" class="btn btn-info" id=b3>Load Page</button> 
 <div id='d3' ></div>

JQuery

<script>
$(document).ready(function() {
$("#b3").click(function(){
$("#d3").load("load-text.php",function(){
alert ( ' Content of load-text.php is loaded');
})
})
})
</script>

Using callback function we can display messages to the user about the backend process. Once the user click a button the process starts, then we will show a message telling user to wait. At the backed script we will create a delay of 5 seconds. After the delay period we will show process complete message to user by using the callback function. Here is the JQuery Script.

<script>
$(document).ready(function() {
/////
$("#b1").click(function(){
$('#msg').html('Wait .. ');
$('#msg').show();
$("#d1").load("load-delay-msgck.php", function() {
$('#msg').html('Done .. ');
setTimeout(function() { $("#msg").fadeOut('slow'); }, 4000);
});
})
////////////////
})
</script>

Class not recognized for handling events in main page

If any class is used in loaded page, then to apply any event to this class we have to use like this.

$('#d2').on('click', ".my_class", function () {
// your script here 
//var b_card_id=this.id; // read the id of clicked class
})

Here my_class is class used in loaded page which gets loaded after an event. #d2 is the id of the Div to display content which is loaded.

Application using load

We will develop one PHP script where we will display name of the students from a MySQL table ( or array ). On click of the name of the student we can collect other details like Class, Mark from the table.

my_load_function=function my_function(){
$('#display_body').load("category-display.php");;
}

///calling the function ///
my_load_function();

You can read more on how to use an user defined function here.
category-display.php will have our back end code to handle data from server.

Associated events of loaded elements

If the loaded elements are added after creation of DOM , then we have to use this code to capture the click events. Read more on click event.

$('#display_body').on('click', ".edit_class", function () {
// Your code here 
})

#display_body is the element to where part of the page is loaded after DOM is created.
.edit_class is the class associated with the element for which events are monitored.

Most Popular JQuery Scripts
1	Two dependant list boxes
2	Calendar with Date Selection
3	Data change by Slider
4	Show & Hide element

JQuery load()

Passing variable while loading the file using GET method

HTML

JQuery

encodeURIComponent()

POST method

HTML

JQuery

Using Callback function

HTML

JQuery

Class not recognized for handling events in main page

Application using load

Associated events of loaded elements

1

2

3

4