jQuery + Spring удалить из базы данных

Question

У меня есть проект с использованием Spring, и мне нужно создать страницу администратора с помощью jQuery. У меня есть таблица со всеми пользователями, и у меня есть кнопка «удалить». Когда я нажимаю, пользователь должен быть удален из базы данных. Без скрипта все работает нормально, но со сценарием я не могу понять, как я могу удалить пользователя из базы данных и как отправить логин пользователю на контроллер. Я мог только удалить строку из таблицы, но когда я обновляю страницу, пользователь все еще там. Может ли кто-нибудь помочь мне, как удалить пользователя из db внутри скрипта?

Таблица

<table id="userBase" class="data" border="1" width="100%" cellpadding="2" cellspacing="4"> 
    <tr> 
     <th>Login</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Birthday</th> 
     <th>Role</th> 
     <th>Actions</th> 
    </tr> 
    <c:forEach items="${userList}" var="user"> 
     <tr> 
      <td>${user.login}</td> 
      <td>${user.firstname}</td> 
      <td>${user.lastname}</td> 
      <td>${user.birthday}</td> 
      <td><c:if test="${user.roleid==1}">Admin</c:if> 
       <c:if test="${user.roleid==2}">User</c:if></td> 
      <td><a href="edit/${user.login}">Edit </a> 
       <a class="confirm" href="delete/${user.login}">Delete</a></td> 
     </tr> 
    </c:forEach> 
</table> 

контроллер без сценария (он комментировал сейчас, но это работает отлично)

@RequestMapping("/delete/{userLogin}") 
public String deleteUser(@PathVariable("userLogin") String userLogin) { 
    userService.remove(userService.findByLogin(userLogin)); 
    return "redirect:/welcome"; 
}   

контроллер для сценария

@Controller 
public class SpringController { 

@Autowired 
private UserService userService; 

@RequestMapping(value = "/delete/{userLogin}", method = RequestMethod.POST) 
@ResponseBody 
public boolean updateUser(@RequestParam("userLogin") String userLogin) { 
    userService.remove(userService.findByLogin(userLogin)); 
    return true; 
} 
} 

Script

<script> 
$(document).ready(function() { 
     $("#userBase .confirm").on("click",function() { 
      var conBox = confirm("Are you sure ?"); 
      if(conBox){ 
       var tr = $(this).closest('tr'); 
       tr.css("background-color","#000000"); 
       tr.fadeIn(1000).fadeOut(200, function(){ 
       tr.remove(); 
      }); 
      } else { 
       $(this).dialog("close"); 
      } 
     }); 
    }); 
</script> 

Answer 1

Вот что работает для меня:

Table (отметьте "Удалить" ссылку)

<table id="userBase" class="data" border="1" width="100%" cellpadding="2" cellspacing="4"> 
    <tr> 
     <th>Login</th> 
     <th>First Name</th> 
     <th>Last Name</th> 
     <th>Birthday</th> 
     <th>Role</th> 
     <th>Actions</th> 
    </tr> 
    <c:forEach items="${userList}" var="user"> 
     <tr> 
      <td>${user.login}</td> 
      <td>${user.firstname}</td> 
      <td>${user.lastname}</td> 
      <td>${user.birthday}</td> 
      <td><c:if test="${user.roleid==1}">Admin</c:if> 
       <c:if test="${user.roleid==2}">User</c:if></td> 
      <td><a href="edit/${user.login}">Edit </a> 
       <a href="${pageContext.request.contextPath}/delete/${user.login}.json">Delete</a> 
     </tr> 
    </c:forEach> 
</table> 

контроллер

@RequestMapping(value="/delete/{userLogin}", method=RequestMethod.DELETE, 
     produces = MediaType.APPLICATION_JSON_VALUE, consumes = MediaType.APPLICATION_JSON_VALUE) 
@ResponseBody 
public void deleteUser(@PathVariable String userLogin) { 
    userService.remove(userService.findByLogin(userLogin)); 
} 

Script

<script> 
$(document).ready(function() { 
    var deleteLink = $("a:contains('Delete')"); 
    $(deleteLink).click(function(event) { 
     var conBox = confirm("Are you sure ?"); 
     if(conBox){ 
     $.ajax({ 
      url: $(event.target).attr("href"), 
      type: "DELETE", 

      beforeSend: function(xhr) { 
       xhr.setRequestHeader("Accept", "application/json"); 
       xhr.setRequestHeader("Content-Type", "application/json"); 
      }, 

      success: function() { 
       var tr = $(event.target).closest("tr"); 
       tr.css("background-color","#000000"); 
       tr.fadeIn(1000).fadeOut(200, function(){ 
       tr.remove();}) 
      } 
     }); 
     } else { 
      event.preventDefault(); 
     } 
     event.preventDefault(); 
    }); 
}); 
</script> 

Answer 2

В коде вы не вызываете нужный URL-адрес, чтобы вызвать метод обработчика, который удалит пользователя. Предполагаю, вы хотите сделать это с помощью ajax? это также поможет, если вы сможете добавить свою разметку.

Что вы можете сделать, это (сейчас, так как ваш вопрос и ваш код выглядит довольно расплывчатым)

$(document).ready(function() { 
     $("#userBase .confirm").on("click",function() { 
      var conBox = confirm("Are you sure ?"); 
      var userLogin = "sampleOnly" //maybe somewhere in your html you have this 
      var url = "mycontroller/delete/"+userLogin //A rough guess for now 
      if(conBox){ 

       $.post(url+userLogin,function(e){ 
        var tr = $(this).closest('tr'); 
        tr.css("background-color","#000000"); 
        tr.fadeIn(1000).fadeOut(200, function(){ 
        tr.remove(); 
       }) 

      }); 
      } else { 
       $(this).dialog("close"); 
      } 
     }); 
    }); 

Answer 3

Если вы хотите отправить данные с помощью jQuery, я предложил бы использовать AJAX с REST. Вот как я это сделать:

@RequestMapping(value="delete.json", method=RequestMethod.DELETE, produces="application/json") 
@ResponseBody 
public Boolean deleteAjaxMultiple(@RequestBody String[] gotten) 
{ 
    for (String login : gotten) 
     userService.remove(userService.findByLogin(login)); 
    return true; 
} 

Этот контроллер обрабатывает JSON запросы, в этом случае массив logins. Тогда вы просто должны вызвать его из JavaScript, как это:

$.ajax({ 
    headers: { 
     'Accept': 'application/json', 
     'Content-Type': 'application/json' 
    }, 
    url: '/delete.json', //or whatever url works for you 
    type: 'DELETE', 
    data: JSON.stringify(arr), //arr is an array of logins you want to delete 
    success: function(data) { 
     location.reload(true); //or do whatever you want on success 
    }    
}); 

Вам нужно настроить Jackson для этого. Для получения дополнительной информации см. this и this.