从javascript模式中的另一个表中获取id

Question

你好，下午好。我想看看在这种情况下如何获取角色的 id，我可以在我的模态中检索所有用户数据。但是我无法找回这个角色，因为它属于另一张桌子，当我要求它时，它给我带来了整张桌子。因为我使用的是多对多关系

这是我的 js

   $('.table .editBtn').on('click', function (event) {

        event.preventDefault();
        var href = $(this).attr('href');

        $.get(href, function (usuario) {
            $('.myForm #idUsuarioEdit').val(usuario.idUsuario);
            $('.myForm #nombreEdit').val(usuario.nombre);
            $('.myForm #apellidoEdit').val(usuario.apellido);
            $('.myForm #emailEdit').val(usuario.email);
            $('.myForm #rolesEdit').val(usuario.roles);
        });
        $('.myForm #editModal').modal();
    });

这是我的控制器

@GetMapping("/editarUsuario")
@ResponseBody
public Usuario editarUsuario(Model model, long idUsuario) throws Exception {

    model.addAttribute("listaUsuarios", usuarioService.getAllUsers());
    model.addAttribute("roles", rolDao.findAll());

    return usuarioService.getUsuarioById(idUsuario);
}

这是我的 html 按钮

    <table id="listaUsuarios" class="table table-bordered table-hover table-striped">
        <thead class="thead-dark">
            <tr>
                <th scope="col">#</th>
                <th scope="col">Nombre</th>
                <th scope="col">Apellido</th>
                <th scope="col">E-mail</th>
                <th scope="col"></th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="usuario : ${listaUsuarios}">
                <td th:text="${usuario.idUsuario}"></td>
                <td th:text="${usuario.nombre}"></td>
                <td th:text="${usuario.apellido}"></td>
                <td th:text="${usuario.email}"></td>
                <td><div class="text-center">
                        <span th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')} or (${#authorization.expression('hasRole(''ROLE_USER'')')} and ${#httpServletRequest.remoteUser==usuario.email})">
                            <a class="btn btn-success editBtn" th:href="@{editarUsuario/(idUsuario=${usuario.idUsuario})}">Editar <i class="fas fa-edit"></i></a>
                        </span> 
                        <span th:if="${#authorization.expression('hasRole(''ROLE_ADMIN'')')}">   |   
                            <a class="btn btn-danger" href="#" th:onclick="'javascript:confirmaEliminar(\''+ ${usuario.idUsuario} +'\');'">Eliminar <i class="fas fa-user-times"></i></a>
                        </span>
                    </div>
                </td>
            </tr>
        </tbody>
    </table>

这是我的模态

<div class="myForm">
    <form th:object="${editarUsuario}" th:action="@{/editarUsuario}" method="post">
        <div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="exampleModalLongTitle">Editar usuario</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <input class="form-control" type="hidden" id="idUsuarioEdit" name="idUsuario" />
                        </div>
                        <div class="form-group">
                            <label class="col-form-label" for="nombre">Nombre:</label>
                            <input class="form-control" type="text" id="nombreEdit" name="nombre" required />
                        </div>
                        <div class="form-group">
                            <label class="col-form-label" for="apellido">Apellido:</label>
                            <input class="form-control" type="text" id="apellidoEdit" name="apellido" required />
                        </div>
                        <div class="form-group">
                            <label class="col-form-label" for="email">E-mail:</label>
                            <input class="form-control" type="text" id="emailEdit" name="email" required />
                        </div>
                        <div class="form-group">
                            <label class="col-form-label" for="rol">Rol:</label>
                            <input class="form-control" type="text" id="rolesEdit" name="roles" required />
                            <!--<select class="form-control" id="rolesEdit" name="rol">
                                <option th:each="rol :${roles}" th:value="${rol.idRol}" th:text="${rol.nombre}"></option>
                            </select>-->
                        </div>
                        <!-- <div class="form-group">
                             <label class="col-form-label" for="rol">Rol:</label>
                             <select class="form-control" id="rolesEdit" name="roles">
                                 <option th:each="rol :${roles}" th:value="${rol.idRol}" th:text="${rol.nombre}"></option>
                             </select>
                         </div>
                         ERROR MESSAGE
                         <div class="content">
                             <div style="text-align: center;" class="alert-danger-registro" th:if="${formErrorMessage}" th:text="${formErrorMessage}">Error Message</div>
                        -->
                    </div>
                    <!--FOOTER-->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancelar</button>
                        <input type="submit" class="btn btn-primary" value="Guardar cambios"/>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>

还有..我编辑用户的方法

//metodo editar usuario
@Override
public Usuario editarUsuario(Usuario fromUser) throws Exception {
    Usuario toUser = getUsuarioById(fromUser.getIdUsuario());
    mapUser(fromUser, toUser);
    return usuarioDao.save(toUser);
}

//Mapeamos todo menos el password.
protected void mapUser(Usuario from, Usuario to) {
    to.setNombre(from.getNombre());
    to.setApellido(from.getApellido());
    to.setEmail(from.getEmail());
    to.setRoles(from.getRoles());
}

目前这是我收到的： modal edit

我已经尝试了很长时间，但我无法收到角色 ID，谢谢。问候

Answer 1

尝试解释真正的问题在哪里，你使用一些库或框架吗？ 您可以尝试了解如何使用您当前使用的 lib 或框架连接表。 或者你只需​​要返回你获取的用户数据的角色，比如：

const allRoles = //fetch roles
const userInfo = //fetch user info
return {userData: userInfo, roles: allRoles}