How to Make a AJAX call to servlet and display the data over the page | Community
Skip to main content
Nandheswara
Nandheswara
Level 4
August 3, 2023
Solved

How to Make a AJAX call to servlet and display the data over the page

  • August 3, 2023
  • 4 replies
  • 2595 views

Hi all,

 

I have the content fragment data in custom servlet end point as JSON and I need to get the servlet end point data using ajax call in js and need to display over the json data in the page, if any one know how to excute this kindly give some idea on this.

 

This is my Custom Servlet End point data

 

 

Thanks

Nandheswara

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SivakumarKanoori

@nandheswara :

 

May be one of the way you can follow this .

 

in your sightly code of the page , 

<sly data-sly-use.fragmentCall="fragemntData.js"></sly>

${fragmentCall.title}

${fragmentCall.description}

${fragmentCall.comment}

 

 

fragemntData.js : It contains the Ajax call.

 

"use strict";

var comment;

var title;

var description;

$.ajax({
url: "/bin/exporter",
success: function (result) {
 comment = result.comment;

 title = result.title;

 description = result.description;
}

})

 

return {

title : title;

description:description;

comment: comment;

}

 

Otheriwse you can get the object from response and same you can return to sightly . there you can loop and display the required fields.

 

Thanks 

Siva

4 replies

varun249715
Adobe Employee
varun249715Adobe Employee
Adobe Employee
August 3, 2023

This can be simply done by creating a js 

 

$(document).ready(function () {
$("button").click(function () {
$.ajax({
url: "/bin/exporter",
success: function (result) {
$("#h11").html(result);
}
});
});
});

    EstebanBustamante
    Community Advisor and Adobe Champion
    EstebanBustamanteCommunity Advisor and Adobe Champion
    Community Advisor and Adobe Champion
    August 3, 2023

    Hi @nandheswara what is the issue you are facing? I don't understand the request. 

     

    You need to simply use a GET request via Javascript, you can use Jquery, VanillaJS, or any other framework.

    Take below as an example:

    $.ajax({ type: 'GET', url: '/bin/exporter.json' }).done(function(data) { console.log('Done data loaded:' + data); //Manipulate the DOM to render in page }).fail(function(err) { console.log('Err' + err); });

      

    Esteban Bustamante
      Mahedi_Sabuj
      Community Advisor
      Mahedi_SabujCommunity Advisor
      Community Advisor
      August 3, 2023

      You can create a html template and container where you will display ajax response.

       

      <!-- Your HTML template -->
      <div class="template">
        <span class="item-name"></span>
        <span class="item-price"></span>
      </div>

       

      <!-- Your container where the cloned elements will be appended -->
      <div id="container"></div>

       

      The following ajax code implementation will fetch the response from your AEM servlet, iterate through the array list, clone the HTML template, update the elements in each iteration with the class selector, and then append the updated template to the container in your HTML.

       

      // Your AJAX call
      $.ajax({
        url: '/bin/exporter.json',
        type: 'GET',
        success: function(response) {
          // Clear previous content from the container
          $('#container').empty();

          // Loop through the AJAX response
          response.forEach(function(item) {
            // Clone the template and update its elements
            var $clonedTemplate = $('.template').clone();
            $clonedTemplate.find('.item-name').text(item.name);
            $clonedTemplate.find('.item-price').text(item.price);

            // Append the updated template to the container
            $('#container').append($clonedTemplate);
          });
        },
        error: function(xhr, status, error) {
          console.error('Error occurred:', error);
        }
      });

       

      Mahedi Sabuj
        SivakumarKanoori
        Community Advisor
        SivakumarKanooriCommunity AdvisorAccepted solution
        Community Advisor
        August 4, 2023

        @nandheswara :

         

        May be one of the way you can follow this .

         

        in your sightly code of the page , 

        <sly data-sly-use.fragmentCall="fragemntData.js"></sly>

        ${fragmentCall.title}

        ${fragmentCall.description}

        ${fragmentCall.comment}

         

         

        fragemntData.js : It contains the Ajax call.

         

        "use strict";

        var comment;

        var title;

        var description;

        $.ajax({
        url: "/bin/exporter",
        success: function (result) {
         comment = result.comment;

         title = result.title;

         description = result.description;
        }

        })

         

        return {

        title : title;

        description:description;

        comment: comment;

        }

         

        Otheriwse you can get the object from response and same you can return to sightly . there you can loop and display the required fields.

         

        Thanks 

        Siva

        Thanks,Siva
          Terms & ConditionsAccessibility statement

          Loading footer...