37 lines
1.2 KiB
HTML
37 lines
1.2 KiB
HTML
<!-- index.html -->
|
|
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Long Task Example</title>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
$('#start-task').click(function() {
|
|
$.getJSON('/start-task', function(response) {
|
|
console.log(response);
|
|
});
|
|
});
|
|
|
|
setInterval(function() {
|
|
$.getJSON('/task-status', function(response) {
|
|
console.log(response);
|
|
if (response.status === 'In progress') {
|
|
// Update the page with a loading indicator or progress bar
|
|
$('#task-status').text('Task in progress...');
|
|
} else {
|
|
// Update the page with the task completion message
|
|
$('#task-status').text('Task completed!');
|
|
}
|
|
});
|
|
}, 1000); // Periodically check the task status every 1 second
|
|
});
|
|
</script>
|
|
</head>
|
|
<body>
|
|
<h1>Long Task Example</h1>
|
|
<button id="start-task">Start Task</button>
|
|
<p id="task-status"></p>
|
|
</body>
|
|
</html>
|