jQuery Ajax Load HTML Page or External Html Page in div

jQuery Ajax Load HTML Page or External Html Page in div

Dynamically load HTML page in div tag using jquery; In this tutorial, you will learn how to load html page or external page content in div tag using jquery.

How to Load External Html Page into Div using jQuery

Using the jQuery ajax $.load method, you can load external html page or html page into a div.

jQuery Ajax $.load Method

Ajax $ .load () method is fetch the data or content, another page into a div, external HTML into div from the other pages or server. Ajax $ .load method sends asynchronous requests from server, retrieves the data from server and replaces content without refreshing/reloading the entire webpage or to load an external webpage into a div of a html page.

Syntax of jQuery Ajax $.load Method

$.load( url [, data ] [, success ]); 

Parameters of jQuery Ajax $.load Method

  • url: This is the required parameter. This is specifies the URL of the file you want to load.
  • data: This is used to sent some to the server with request.
  • success : This function to be executed when request succeeds.

Example – How to load external html page into a div using jquery

This example will demonstrate to you how to send HTTP load requests to the server and get the data from the server.

We need to create a html file name “load.html” and store into your web server and replace the below code here.

<h3>This is Ajax Loading Demo Example</h3>
<p>You click on load content button, After that appear from other file</p>

After that we need to create one file name load-demo.html and put the below code here.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ajax $.Load Method Example of Loading Data from External File</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>   
<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        $("#output").load("/Demos/html/load.html");
    });
});
</script>
<style type="text/css" media="screen">
  .formClass
{
    padding: 15px;
    border: 12px solid #23384E;
    background: #28BAA2;
    margin-top: 10px;
}   
</style>
</head>
<body>
    <div class="formClass">
    <div id="output">
        <h2>Click button to load new content inside DIV box</h2>
    </div>
    <button type="button">Click to Load Content</button>
    <div>
</body>
</html>                            

Output

Ajax $.Load Method Example of Loading Data from External File

Click button to load new content inside DIV box

Example demonstration

  • In this above ajax post() method example. The url parameter is first parameter of the $.load method and it help to retrieve the content or text from the web server.
  • The Next parameter data is a data to submit form data in JSON format, In pair of key value.
  • Success is a callback function that is executed when the request completes.

Recommended jQuery Tutorials

  1. jQuery | Event MouseUp () By Example
  2. Event jQuery Mouseleave By Example
  3. jQuery Event Mouseenter Example
  4. Event jQuery MouseOver() & MouseOut By Example
  5. keyup jquery event example
  6. Jquery Click() Event Method with E.g.
  7. Event jQuery. Blur By Example
  8. jQuery form submit event with example
  9. keydown function jQuery
  10. List of jQuery Events Handling Methods with examples
  11. Jquery Selector by .class | name | #id | Elements
  12. How to Get the Current Page URL in jQuery
  13. jQuery Ajax Get() Method Example
  14. get radio button checked value jquery by id, name, class
  15. jQuery Set & Get innerWidth & innerHeight Of Html Elements
  16. jQuery Get Data Text, Id, Attribute Value By Example
  17. Set data attribute value jquery
  18. select multiple class in jquery
  19. How to Remove Attribute Of Html Elements In jQuery
  20. How to Checked Unchecked Checkbox Using jQuery
  21. jQuery removeClass & addClass On Button Click By E.g.
  22. To Remove whitespace From String using jQuery
  23. jQuery Ajax Post() Method Example
  24. jQuery Ajax Get() Method Example

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

Leave a Reply

Your email address will not be published. Required fields are marked *