jQuery load() method is simple but very powerful AJAX method. The Load() method in jQuery helps to load data from server and returned into selected element without loading the whole page.
Syntax:
$(selector).load(URL, data, callback);
Parameters: This method accepts three parameter as mentioned above and described below:
- URL: It is used to specify the URL which need to load.
- data: It is used to specify a set of query key/value pairs to send along with the request.
- callback: It is the optional parameter which is the name of a function to be executed after the load() method is call.
Return Value: This method returns the requested data from server with the specified URL.
Example:
The geeks.txt file stored on server and it will load after clicking the click button. The content of geeks.txt are:
Hello GeeksforGeeks!
Program 1:
<!DOCTYPE html> <html> <head> <script src= </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div_content").load("gfg.txt"); }); }); </script> <style> body { text-align: center; } .gfg { font-size:40px; font-weight: bold; color: green; } .geeks { font-size:17px; color: black; } #div_content { font-size: 40px; font-weight: bold; color: green; } </style> </head> <body> <div id="div_content"> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </div> <button>Change Content</button> </body> </html> |
Output :
There is also an additional callback function in the parameter which will run when the load() method is completed. This callback function has three different parameters:
- parameter 1: It contains the result of the content if the method call succeeds.
- parameter 2: It contains the status of the call function.
- parameter 3: It contains the XMLHttpRequest object.
Program 2:
<html> <head> <script src= </script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div_content").load("gfg.txt", function(response, status, http){ if(status == "success") alert("Content loaded successfully!"); if(status == "error") alert("Error: " + http.status + ": " + http.statusText); }); }); }); </script> <style> body { text-align: center; } .gfg { font-size:40px; font-weight: bold; color: green; } .geeks { font-size:17px; color: black; } #div_content { font-size: 40px; font-weight: bold; color: green; } </style> </head> <body> <div id="div_content"> <div class = "gfg">GeeksforGeeks</div> <div class = "geeks">A computer science portal for geeks</div> </div> <button>Change Content</button> </body> </html> |
Output:
Output of the given code followed an alert box that will appear after click on the button and if the content loaded successfully then it will give a message “Content loaded successfully!”. Otherwise it will show an error message.
Recommended Posts:
- JQuery | Set focus on a form input text field on page load
- How to load jQuery code after loading the page?
- How to dynamically load JS inside JS ?
- How to load CSS files using JavaScript?
- How to create fade-in effect on page load using CSS ?
- HTML | DOM Video load( ) Method
- How to load notification alert on top right corner without click of button in bootstrap ?
- PHP | DOMDocument load() Function
- How to tell if a <script> tag failed to load?
- Difference between DOMContentLoaded and load Events
- How to execute AngularJS controller function on page load ?
- HTML | DOM Audio load() Method
- How to Load External JS Scripts Dynamically in AngularJS ?
- How to load font-awesome using SCSS ?
- How to load the contents of a text file into a JavaScript variable?
- How to load data from JSON into a Bootstrap Table?
- What Happens To CSS When We Load a Page?
- jQuery | jQuery.fx.interval Property with example
- jQuery | jQuery.fx.off Property
- jQuery | jQuery.support Property
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
