@KaizerSX

Как обновить данные в таблице без перезагрузки страницы?

Здравствуйте!

Технологии: springboot, html,js, ajax.

Есть форма при заполнении которой и нажатии кнопки "отправить", через ajax отправляется запрос на эндпойнт, тем самым сервер сохраняет данные в базе и после успешного выполнения выполняет функцию JS , который генерирует таблицу с актуальными данными из базы.

Проблема в том, что при нажатии "отправить" данные в таблице обновляются только после перезагрузки страницы:

как сделать так, чтобы данные в таблице обновлялись при нажатии кнопки отправить, а не только при обновлении страницы?

Вот index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style> div {margin-bottom: 30px;} 
    
            td {margin-right: 10px;}
            th {margin-right: 10px;}
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.js"></script>

    <script >


        function showuser() {

          $.get('/get_user', function (data) {

              let table = "<table border='1'>";


              for (i = 0; i < data.length; i++) {

                  table = table + "<tr><td>" + data[i].id + "</td><td>" + data[i].name + "</td><td>" + data[i].famname + "</td></tr>";

              }

              table = table + "</table>";

              $("#testuser").html(table);

          });

      }

        $(document).ready(function() {

            showuser();
        });


        function send_user() {

                $.ajax({
                    url: '/adduser',
                    dataType: 'json',
                    type: 'POST',
                    cache: false,
                    contentType: 'application/json',
                    data: JSON.stringify({
                   id: $("#user_id").val(),
                   name: $("#user_name").val(),
                   famname: $("#user_famname").val()
                    }),
                    success: showuser()

                });

        }

    </script>

</head>
<body>

<h1 style="text-align: center">Таблица пользователей:</h1>

<div></div>
<div></div>



<div id="testuser">

</div>

<div></div>
<div></div>
<div></div>
<div>

    <form>
        <input type="text" id="user_id" placeholder="id">
        <input type="text" id="user_name" placeholder="Name">
        <input type="text" id="user_famname" placeholder="Family name">
        <input type="button" onclick="send_user()" value="Отправить">
    </form>
    
</div>

</body>
</html>


Вот контроллеры на стороне сервера:

@RestController
public class Ajaxcontoller {

    @Autowired
    UserRepos ajaxrepos;

    @RequestMapping(method = RequestMethod.GET, value = "/get_user")
    List<User> getAllUsers( ){

        List<User> alluser=ajaxrepos.findAll();


        return alluser;
    }


    @PostMapping("/adduser")
    void addUser(@RequestBody User user)
    {
        System.out.println("MY RESPONSE: "+user.toString());
        ajaxrepos.save(user);

    }


}
  • Вопрос задан
  • 3456 просмотров
Пригласить эксперта
Ответы на вопрос 2
azerphoenix
@azerphoenix Куратор тега Java
Java Software Engineer
Добрый день!
Ваш вопрос больше касается js, нежели java.
Теперь, по поводу реализации: после добавления нового пользователя не нужно вызывать каждый раз метод showUser и обновлять весь список. Вместо этого вы можете добавить нового пользователя в таблицу новой строкой.

Чтобы сделать вышеуказанным способом нужно:
Вместо void вернуть другой ответ. Например, нового пользователя.
Т.е. ResponseEntity или User вместо void
@PostMapping("/adduser")
    void addUser(@RequestBody User user)
    {
        System.out.println("MY RESPONSE: "+user.toString());
        ajaxrepos.save(user);

    }

А дальше последней строкой добавить нового пользователя через append в существующую таблицу

Было бы неплохо подебажить ваш код на серверной стороне и на клиентской стороне и глянуть в консоль браузера на предмет наличия ошибок в js.
В частности, надо бы глянуть что приходит в ответ после добавления нового юзера и вызова showuser()
Возможно, что ошибка происходит при вызове showuser().
Ответ написан
Комментировать
@Fenix957
Посмотрите в эту сторону ту и ajax и все плюшки фильтры сортировка пагинация

https://datatables.net
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы