javascript - 如何使用ajax在html中显示mySQL数据

Question

我通常做的是从存储库中获取数据并通过 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>

这一切都很好，但是当用户最初将数据发送到数据库时出现问题，页面会刷新并强制用户到页面顶部，从而产生负面的用户体验。

我想出了如何使用 ajax 来解决刷新页面的问题，方法是让 post 请求首先通过 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);
        }
       });
    });
 });

通过将数据发送到数据库而不刷新页面可以正常工作，但问题是在将数据发送到数据库后检索数据。我不太明白如何检索数据并将其显示在表格中给用户，这是我到目前为止所拥有的，但似乎不起作用：

 $(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);
         }
       });
    });
 });

我添加了一个警报只是为了将数据视为测试。基本上我想像往常一样通过我的存储库从数据库中获取数据，然后将该数据传递给视图以显示如下：

但是它应该再次使用 ajax get，所以只要用户点击提交，表就会刷新（而不是整个页面）并且表会反映数据库数据。

标签： javascriptajaxspringthymeleaf