To Load/Render html Page into div Using jQuery Ajax $.load

To Load/Render html Page into div Using jQuery Ajax $.load

How to use load the content or html from the server or other files. Use the jQuery ajax $.load method and load the content. In this ajax $.load method tutorial, We are going to show how to use this method with example from scratch.

Let’s see jQuery Api Ajax $.load

About jQuery Ajax $.load Method

Ajax $ .load () method is fetch the data or content 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 web page.

Syntax of Ajax $.load() Method

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

Parameters

  • 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 Ajax $.load

This example will demostrate you how to send http load request to the server and get the data from the server.

We need to Create a html file name “load.html” and store in to 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.

Leave a Reply

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