Передача параметра html в запрос ajax с использованием ключевого слова this - PullRequest
1 голос
/ 17 февраля 2020

У меня небольшая проблема: При запуске - мои источники: пользователи. js

function getUsers(){
    $list = $('.table tbody');
    $.ajax({
        url: 'http://localhost:8080/user',
        dataType: 'json'
    })
        .done((res) => {
            $list.empty();
            $.each(res, function (i, item) {
                $list.append('<tr>' +
                    '<th scope="row" >' + res[i].id + '</th>' +
                    '<td>' + res[i].firstname + '</td>' +
                    '<td>' + res[i].lastname + '</td>' +
                    '<td>' + res[i].email + '</td>' +
                    '<td><button class="btn btn-danger btn-xs btn-delete" onclick="deleteUser()" id='+res[i].id+'>Delete</button></td>' +
                    '</tr>');
            })
        })
}
function deleteUser(){
    let id = this.id;
    let row = $(this);
    $.ajax({
        url: 'http://localhost:8080/user/'+id,
        type: 'DELETE',
        contentType:'application/json',
        dataType: 'text',
        success: function(result) {
            row.closest("tr").remove();
            alert('user: '+id+' deleted');
        },
        error: function(result) {
            alert('cannot delete user: '+id);
        }
    })
}

и пользователей. html:

<html lang="en">
<head>
    <link rel="stylesheet" href="../../../js/bootstrap.min.css">
    <link rel="stylesheet" href="../../../css/main.css">
    <script src="../../../js/jquery-3.4.1.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../js/admin/users.js"></script>
    <title>Admin: users page</title>
</head>
<body>
<div id="wrapper">

    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                <a href="#">
                    Administration
                </a>
            </li>
            <li>
                <a href="/users">Users</a>
            </li>
            <li>
                <a href="../index">Log out</a>
            </li>
        </ul>
    </div>
    <!-- /#sidebar-wrapper -->

    <!-- Page Content -->
    <div id="page-content-wrapper">
        <button class="button" id="getUsers" onclick="getUsers()" type="button">Get users</button>
        <table class="table">
            <thead>
            <tr>
                <th scope="col">id</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Mail</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
    <!-- /#page-content-wrapper -->

</div>
</body>
</html>

Хорошо, это моя проблема: я нажимаю кнопку getUsers на своей странице, теперь у меня есть список пользователей с кнопкой удаления в каждой строке. Теперь я хочу отправить запрос на удаление конечной точке пользователя / {id} с идентификатором, переданным из строки html (которая содержит нажатую кнопку удаления). Знаете ли вы, как правильно передать идентификатор пользователя в запрос ajax после нажатия кнопки удаления? Теперь у меня есть: let id = this.id; , но id в этой ситуации не определен

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...