How to fetch only sections of specific HTML areas from an external page using AJAX ?

Last Updated : 09 Jan, 2023

In this article, we will see how to fetch the specific sections of an HTML file from an external page using AJAX, along with understanding their basic implementation through the illustrations.

Suppose we have an HTML page and this page contains different sections. Each Section can be identified using the class name or ID. Our task is to use Ajax in the External HTML page and fetch the content of the first HTML page into the External HTML Page. Here, we have 2 HTML pages, where the specific portion of code from HTML page 1 is getting fetched by HTML page 2. The below example depicts the concept of fetching only sections of specific HTML areas from an external page.

To accomplish this task, the jQuery Load() function will be used that helps to load data from the server and returned it to the selected element without loading the whole page.

Syntax:

$(selector).load(URL, data, callback);

This function can load data from files like HTML, TXT, XML, and JSON.

Approach: To perform this task, we will follow the below steps:

Create two HTML files, i.e. Index.html & External.html.
Define some elements in the Index.html file. Here, we are defining 3 <section> elements.
Assign a class name or ID to each section, so that it can be easily identified.
Inside the <section> tag, declare the unordered list containing different list items.
Initially create an <div> element in the External.html page to display the fetched content.
Declare a button element that will call the function of AJAX and data will be fetched and displayed.
$(“#display”).load(“index.html .first”), JQuery load() method will load the <section> whose classname is .first into the <div> element of External.html page whose id is #display.

Example 1: In this example, we will be fetching the first <Section> element of the index.html page using the External.html page.

External.html: In this HTML file, we have created a button with a click event. When the button will click for the first time, the Ajax code will run inside the <script> tag. We have specified the “.first” in the load function which means we want to load the section with the class name “first” into our external page.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
    <h3> 
        fetch only sections of specific HTML areas 
        from an external page using AJAX 
    </h3> 
  
    <button onclick="event_occur()"> 
        Click Here 
    </button><br><br> 
  
    <h3>External.html page</h3> 
    <div id="display" 
         style="border: 1px solid black;  
                width:max-content;  
                padding:0.5rem"> 
        fetched Content will display here. 
    </div> 
  
    <script> 
        event_occur = () => { 
            // Load the Section with .first class and display 
            $("#display").load("index.html .first"); 
        }; 
    </script> 
</body> 
  
</html>

Index.html:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>GeeksforGeeks</title> 
</head> 
  
<body> 
    <section class="first"> 
        <h3> 
            Index.html - Section - class = "first" 
        </h3> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <h3>Web Development</h3> 
        <ul> 
            <li>HTML</li> 
            <li>CSS</li> 
            <li>JAVA SCRIPT</li> 
            <li>JQUERY</li> 
        </ul> 
    </section> 
  
    <section class="second"> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <h3>Machine Learning</h3> 
        <ul> 
            <li>Python</li> 
        </ul> 
    </section> 
  
    <section class="third"> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <h3>Courses</h3> 
        <ul> 
            <li>Interview Preparation</li> 
            <li>DSA</li> 
            <li>DBMS</li> 
        </ul> 
    </section> 
</body> 
  
</html>

Output:

Example 2: In this example, we are fetching all the content of the <div> tag of the index.html page using the External.html page.

External.html:

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Fetching only sections of specific HTML areas 
        from an external page using AJAX 
    </title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> 
    </script> 
</head> 
  
<body> 
  
    <h2 style="color: green;"> 
        GeeksforGeeks 
    </h2> 
    <h3> 
        fetch only sections of specific HTML  
        areas from an external page using AJAX 
    </h3> 
    <button onclick="event_occur()"> 
        Click Here 
    </button><br> 
    <h3>External.html page</h3> 
    <div id="display" 
         style="border: 1px solid black;  
                width:max-content;  
                padding:0.5rem;"> 
        fetched Content will display here. 
    </div>  
  
    <script> 
        event_occur = () => { 
              
            // Load the Div tag with .first class and display 
            $("#display").load("index.html div"); 
        }; 
    </script> 
</body> 
  
</html>

index.html

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>GeeksforGeeks</title> 
</head> 
  
<body> 
    <section> 
        <h2 style="color: green;"> 
            GeeksforGeeks 
        </h2> 
        <h3>Index.html - Sections </h3> 
    </section> 
    <div> 
        <h3>Web Development</h3> 
        <ul> 
            <li>HTML</li> 
            <li>CSS</li> 
            <li>JAVA SCRIPT</li> 
            <li>JQUERY</li> 
        </ul> 
    </div> 
  
    <section> 
        <h3>Machine Learning</h3> 
        <ul> 
            <li>Python</li> 
        </ul> 
    </section> 
</body> 
  
</html>