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.