Здравствуйте!
Технологии: 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);
}
}
Простой
Простой