Expand my Community achievements bar.

Learn about Edge Delivery Services in upcoming GEM session
SOLVED

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

Avatar

Level 4

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

Nandheswara_0-1691082750876.png

 

 

Thanks

Nandheswara

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

@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

View solution in original post

4 Replies

Avatar

Employee

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

Avatar

Community Advisor

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

Avatar

Community Advisor

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

 

Avatar

Correct answer by
Community Advisor

@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