How to display ajax list response on html using jquery?

So I currently have a search box that the user can search for managers. When the manager is searched and selected, they can choose to show direct report employees via a button that triggers a Javascript function that sends an Ajax post to the backend to query the database. Upon receiving a success response, I would like to display a table with general info of the employee (such as First, Last name, Position, etc.) We have previously used Jquery to pull the data upon load, but I was wondering if there was a way to pull and display this data from the Ajax response and display it on page without refreshing? Another roadblock seems to be that the response is in a List fashion, in such that it returns none to many employees; a variable response. If it is more effective, we are also using a Thymeleaf template, but I doesn't appear if I can make the Thymeleaf selectors open to a live update such as this

Solution

In order to set the Ajax Response in your HTML page, Do something like this :-

1.) Use your HTML element's id and then append the response fro your ajax Success function.

Suppose there's a text box in which you want to set the response.

<input type="text" id="inputText" >

2.) Now, in your ajax success Response , get the id of this element and then append the response like this :- -

$.ajax({
      url: //your url,
      success(data){
           $('#inputText').val(""); //clear the text box on each call so that it won't append the data on every request
           $('#inputText').val(data); //get the text-box id and append the response
      },
      error(data){
       console.log(JSON.stringify(data));
       }
});