7.8 KiB
7.8 KiB
<html>
<head>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
</head>
<script>
// Получение всех пользователей
function GetUsers() {
$.ajax({
url: '/api/users',
type: 'GET',
contentType: 'application/json',
success: function (users) {
var rows = '';
$.each(users, function (
index,
user
) {
// добавляем полученные элементы в таблицу
rows += row(user);
});
$('table tbody').append(rows);
},
});
}
// Получение одного пользователя
function GetUser(id) {
$.ajax({
url: '/api/users/' + id,
type: 'GET',
contentType: 'application/json',
success: function (user) {
var form =
document.forms['userForm'];
form.elements['id'].value = user.id;
form.elements['name'].value =
user.name;
form.elements['age'].value =
user.age;
},
});
}
// Добавление пользователя
function CreateUser(userName, userAge) {
if (userName == "" || userAge == "") return;
var regex = /[a-zA-Z]/;
if (!regex.test(userName) || userName.length < 3 || userName.length > 8) {
return
}
var regex = /[0-9]/;
if (!regex.test(userAge) || Number(userAge) > 130) {
return
}
$.ajax({
url: 'api/users',
contentType: 'application/json',
method: 'POST',
data: JSON.stringify({
name: userName,
age: userAge,
}),
success: function (user) {
reset();
$('table tbody').append(row(user));
},
});
}
// Изменение пользователя
function EditUser(userId, userName, userAge) {
$.ajax({
url: 'api/users',
contentType: 'application/json',
method: 'PUT',
data: JSON.stringify({
id: userId,
name: userName,
age: userAge,
}),
success: function (user) {
reset();
$(
"tr[data-rowid='" +
user.id +
"']"
).replaceWith(row(user));
},
});
}
// сброс формы
function reset() {
var form = document.forms['userForm'];
form.reset();
form.elements['id'].value = 0;
}
// Удаление пользователя
function DeleteUser(id) {
$.ajax({
url: 'api/users/' + id,
contentType: 'application/json',
method: 'DELETE',
success: function (user) {
console.log(user);
$(
"tr[data-rowid='" +
user.id +
"']"
).remove();
},
});
}
// создание строки для таблицы
var row = function (user) {
return (
"" +
user.id +
'' +
'' +
user.name +
' ' +
user.age +
'' +
"Изменить | " +
"Удалить"
);
};
// сброс значений формы
$('#reset').click(function (e) {
e.preventDefault();
reset();
});
// отправка формы
$('form').submit(function (e) {
e.preventDefault();
var id = this.elements['id'].value;
var name = this.elements['name'].value;
var age = this.elements['age'].value;
if (id == 0) CreateUser(name, age);
else EditUser(id, name, age);
});
// нажимаем на ссылку Изменить
$('body').on('click', '.editLink', function () {
var id = $(this).data('id');
GetUser(id);
});
// нажимаем на ссылку Удалить
$('body').on(
'click',
'.removeLink',
function () {
var id = $(this).data('id');
DeleteUser(id);
}
);
// загрузка пользователей
GetUsers();
</script>
</html>
Список пользователей
Файл
Сохранить
Сбросить
| Id | Имя | возраст |
|---|