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

[Nandheswara]

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

[varun249715]

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]

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);
});

[Mahedi_Sabuj]

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);
  }
});

[SivakumarKanoori · Accepted solution]

@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