Хорошо, так что из вашего вопроса я предполагаю, что вы хорошо разбираетесь в серверной части, но вам нужна помощь в ознакомлении с интерфейсами и средами рендеринга.
Как и многие разработчикиЯ бы сказал вам, что в этом случае есть много способов убить кошку, поэтому я рекомендую вам несколько фреймворков и библиотек:
Рекомендации: - Angular 4+ (мой личный фаворит)) - Реагируйте, - Vue - это очень хорошие интерфейсные среды, с которыми вы можете начать работу, чтобы создавать комплексные одностраничные приложения, которые легко масштабировать и уменьшать.Обратите внимание, что существует множество ДРУГИХ интерфейсных сред, из которых можно выбирать.
Знание того, как использовать Javascript, необходимо для манипулирования DOM путем рендеринга извлеченных данных с сервера (как в вашем случае), поэтому я дам вам два примера того, как сделать это, используя нативный JS и JQuery в качестве библиотеки
1)
// initiate your request
xhr = new XMLHttpRequest();
// check if the server has responded with a status code of 200 after the request has been made
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
results = JSON.parse(xhr.response);
// the easiest workaround is to build the html string and then inject it into the tbody
// the best approach would be to createElements and inject them as you loop through the retuned data
// using the easiest approach
myString = "";
for (i = 0; i < results; i++) {
myString += "<tr><td>" + results[i].jsonElementForHeader1 + "</td><td>" + results[i].jsonElementForHeader2 + "</td></tr>";
}
// put the generated stuff from the request into the table body as table rows
tbody = document.getElementById("tbody").innerHTML = myString
}
};
// Add an event listener that checks the progress of the request once initiated
xhr.addEventListener('progress', evt => {
if ( evt.lengthComputable ) {
const perc = evt.loaded / evt.total * 100;
// log the percentage to the console for monitoring (or render it the way you want)
console.log(perc);
}
}, false);
// specify the method and URL that you would want to query
xhr.open('POST', 'http://your.domain:port/script', true);
// important, if you are using cookies,
xhr.withCredentials = true;
// initiate the request
xhr.send(res1);
<html>
<head>
<title>Thingy</title>
</head>
<body>
<table>
<thead>
<tr>
<td>
<label>header 1</label>
</td>
<td>
<label>header 2</label>
</td>
</tr>
</thead>
<tbody id = 'theTableBody'>
</tbody>
</table>
</body>
</html>
2)
// launch your request to the server
$.post('http://your.domain:port/APIHandler', {'query': 'parameter(s) JSON Style'}, function(data) {
// looping through the returned data to handle insertion of the data
// we will use the recommended way this time round, but generating strings
tbody = document.getElementById('theTableBody');
for (i = 0; i < data.length; i++) {
element = document.createElement("tr");
element.innerHTML = "<td>" + data[i].desiredElementName1 + "</td><td>" + data[i].desiredElementName2 + "</td>";
tbody.appendChild(element);
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<title>Thingy</title>
</head>
<body>
<table>
<thead>
<tr>
<td>
<label>header 1</label>
</td>
<td>
<label>header 2</label>
</td>
</tr>
</thead>
<tbody id = 'theTableBody'>
</tbody>
</table>
</body>
</html>