我通常会从存储库中获取数据，并通过addattribute将数据传递给视图，如下所示：

@GetMapping("html_page")
public String dynamicPage(Model model){

    List<MySqlDataDTO> mySqlDataDTO = mySqlRepository.findAllByName(name);

    model.addAttribute("mySqlDataDTO", mySqlDataDTO);

    return "html_page";
}

然后使用thymeleaf循环遍历数据并将其显示在表中，如下所示：

<table id="table" >
                                <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Name</th>
                                    <th>Fav</th>
                                </tr>
                                </thead>

                                <tbody >
                                <tr th:each="mySqlDataDTO : ${mySqlDataDTO}" >
                                    <th th:text="${mySqlDataDTO.id}"></th>
                                    <td th:text="${mySqlDataDTO.name}"></td>
                                    <td th:text="${mySqlDataDTO.fav}"></td>
                                </tr>
                                </tbody>
                            </table>

这一切都是好的，但是，当用户首次将数据发送到db时，问题就出现了，页面将刷新并强制用户到页面顶部，从而创建了负面的用户体验。
通过让post请求首先通过ajax，我发现了如何使用ajax来解决刷新页面的问题，如下所示：

$(document).ready(function () {

$('#form').on('submit', function(e) {
    e.preventDefault();

    $.ajax({
        url : $(this).attr('action') || window.location.pathname,
        type: "POST",
        data: $(this).serialize(),
        success: function (data) {

        },
        error: function (jXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
       });
    });
 });

通过将数据发送到db而不进行页面刷新，这一方法可以很好地工作，但问题是在将数据发送到数据库之后检索数据。我不太明白如何检索数据并将其显示在一个表中给用户，以下是我到目前为止所做的，但似乎不起作用：

$(document).ready(function () {

 $('#form').on('submit', function(e) {
     e.preventDefault();

     $.ajax({
         url : $(this).attr('action') || window.location.pathname,
         type: "GET",
         contentType: "application/json;charset=utf-8",
         dataType: "json",
         success: function (data) {
             $('#table').empty();
             $.each(data.items, function(item) {
                 alert(data.name);
             });

         },
         error: function (jXHR, textStatus, errorThrown) {
             alert(errorThrown);
         }
       });
    });
 });

我添加了一个警报，只是为了将数据视为一个测试。基本上，我希望像通常通过存储库那样从数据库中获取数据，然后将这些数据传递到视图中，以如下方式显示：

但是它也应该使用ajaxget，所以一旦用户点击submit，表就会刷新（不是整个页面），并且表会反映db数据。