Я написал бек-часть веб приложения "Список дел" на spring boot, но сейчас хочу добавить простенький веб-интерфейс с помощью html и js. Список дел подгружается на главной странице из БД через html:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>To Do List</title>
<script src="/js/jquery-3.4.0.min.js"></script>
<script src="/js/main.js"></script>
<link rel="stylesheet" type="text/css" href="/css/styles.css">
</head>
<body>
<div id="task-form">
<form>
<h2>Добавление дела</h2>
<label>Дело:</label>
<input type="text" name="name" value="">
<hr>
<button id="save-task">Сохранить</button>
</form>
</div>
<h1>Список дел</h1>
<button id="show-add-task-form">Добавить дело</button>
<br><br>
<div id="task-list">
<div th:each="task : ${tasks}">
<a href="#" class="task-link" th:attr="data-id=${task.id}" th:text="${task.name}"></a>
</div>
</div>
</body>
</html>
В чем проблема: нужно, чтобы на странице сразу появлялось дело при добавление через форму. Находил инфу про куки, проверку на изменения, но не знаю, как и где это применить для себя.. Я очень плохо знаком с js, поэтому прошу не хейтить за, возможно, очевидный вопрос. Буду рад любой помощи, спасибо! JS:
$(function(){
const appendTask = function(data){
var taskCode = '<a href="#" class="task-link" data-id="' +
data.id + '">' + data.name + '</a><br>';
$('#task-list')
.append('<div>' + taskCode + '</div>');
};
//Show adding task form
$('#show-add-task-form').click(function(){
$('#task-form').css('display', 'flex');
});
//Closing adding task form
$('#task-form').click(function(event){
if(event.target === this) {
$(this).css('display', 'none');
}
});
//Add task
$('#save-task').click(function()
{
var data = $('#task-form form').serialize();
$.ajax({
method: "POST",
url: '/tasks/',
data: data,
success: function(response)
{
$('#task-form').css('display', 'none');
var task = {};
task.id = response;
var dataArray = $('#task-form form').serializeArray();
for(i in dataArray) {
task[dataArray[i]['name']] = dataArray[i]['value'];
}
appendTask(task);
}
});
return false;
});
});