jQuery Load External Html Content from Another Page

To load html content from another page using jQuery + ajax; Through this tutorial, i am going to show you how to load external html page content from another page into a div using jQuery + ajax.

jQuery Load External Html Content from Another Page Using Ajax

Using the jQuery ajax load() method; You can easily load external html page content or webpage content from another page into a div or another tag using jQuery + ajax.

jQuery Ajax $.load Method

Ajax $ .load () method is get external html page content from another page and display into a div tag using jQuery.

Ajax $ .load method sends asynchronous requests from server and 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 with jQuery.

Syntax of Ajax $.load() Method

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

Parameters of 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 of how to load external html page content into a div using jquery

Example for how to send HTTP load requests to the server and get the data from the server.

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

Then create one file name load-demo.html and add the following code into it:

<!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("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>                            

Explanation of the above code

  • 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

Be First to Comment

Leave a Reply

Your email address will not be published.