春天開機刪除數據庫條目點擊按鈕

Question

我使用Spring的引導和JSP項目工作，並且UI提供如下之後，

我想刪除使用刪除按鈕的行條目。頁面list.jsp負載與所述控制器的方法，

@GetMapping(value = "/") 
public String index() { 
    return "redirect:/users"; 
} 

@GetMapping(value = "/users") 
public String showAllUsers(Model model) { 

    model.addAttribute("users", userService.findAll()); 
    return "list"; 
} 

的JSP部分的按鈕處於list.jsp頁，

<td> 
        <spring:url value="https://stackoverflow.com/users/${user.id}" var="userUrl"/> 
        <button class="btn btn-info" onclick="location.href='${userUrl}'">Query</button> 

        <spring:url value="https://stackoverflow.com/users/${user.id}/delete" var="deleteUrl"/> 

      <button class="btn btn-danger" onclick="this.disabled=true;removeUser()">Delete</button> 

        <spring:url value="https://stackoverflow.com/users/${user.id}/update" var="userUpdate"/> 
        <button class="btn btn-info" onclick="location.href='${userUpdate}'">Update</button> 
       </td> 

對刪除控制器映射，

@DeleteMapping(value = "https://stackoverflow.com/users/{id}/delete") 
    public String deleteUser(@PathVariable("id") Long idx, final RedirectAttributes redirectAttributes) { 

     logger.debug("Delete user with Id {}", idx); 

     redirectAttributes.addFlashAttribute("css", "Success"); 
     redirectAttributes.addFlashAttribute("msg", "The user is deleted"); 

     // delete the user 
     userService.delete(idx); 
     return "redirect:/users/"; 
    } 

我在自定義文件中具有JavaScript功能，

function removeUser(){ 

} 

和，點擊刪除按鈕後，我可以得到一些控制檯輸出，這意味着刪除按鈕正在工作。我應該如何實現removeUser函數，在點擊按鈕後刪除行？

我想知道是否可以使用jQuery中的任何內置方法來執行此操作。謝謝。

Query和Update按鈕具有相應的控制器方法並可正常工作。

如果我離開它，就像

<spring:url value="https://stackoverflow.com/users/${user.id}/delete" var="deleteUrl"/> 

它不刪除該行還是anythong

Update

我可以通過刪除URL到自定義JavaScript函數，

<spring:url value="https://stackoverflow.com/users/${user.id}/delete" var="deleteUrl"/> 
        <button class="btn btn-danger" onclick="this.disabled=true;removeUser('${deleteUrl}')">Delete</button> 

提供的removeUser功能，

function removeUser(deleteURL) { 

    console.log("Remove : " + deleteURL); 

    $.ajax({ 

     type: "DELETE", 
     url: deleteURL, 

     success: function() { 

     }, 

     failure: function (errMsg) { 
      console.log(errMsg.toString()) 
     } 
    }); 
} 

我試圖寫成功的函數，而不是工作雖然

Answer 1

問題下的意見非常有幫助，我管理與最少的代碼量做到這一點。在JSP頁面的按鈕調用removeUser功能，

<tr id="myTableRow"> 
       <td><c:out value="${user.id}"/></td> 
       <td><c:out value="${user.name}"/></td> 
       <td><c:out value="${user.email}"/></td> 
       <td><c:forEach var="framework" items="${user.framework}" varStatus="loop"> 
        ${framework} 
        <c:if test="${not loop.last}">,</c:if> 
       </c:forEach> 
       </td> 

       <td> 
        <spring:url value="https://stackoverflow.com/users/${user.id}" var="userUrl"/> 
        <button class="btn btn-info" onclick="location.href='${userUrl}'">Query</button> 

        <spring:url value="https://stackoverflow.com/users/${user.id}/delete" var="deleteUrl"/> 
        <button class="btn btn-danger" onclick="removeUser('${deleteUrl}')">Delete</button> 

        <spring:url value="https://stackoverflow.com/users/${user.id}/update" var="userUpdate"/> 
        <button class="btn btn-info" onclick="location.href='${userUpdate}'">Update</button> 
       </td> 
      </tr> 

的removeUser功能，

// delete the user from the database 
function removeUser(deleteURL) { 

    $.ajax({ 

     type: "DELETE", 
     url: deleteURL, 

     success: function() { 
      // window.location.reload(); 
      $('#myTableRow').remove(); 
     }, 

     failure: function (errMsg) { 
      console.log(errMsg.toString()) 
     } 
    }); 
} 

刪除從MySQL行控制器，

@DeleteMapping(value = "https://stackoverflow.com/users/{id}/delete") 
    @ResponseStatus(value = HttpStatus.OK) 
    public String deleteUser(@PathVariable("id") Long idx, final RedirectAttributes redirectAttributes) { 

     logger.debug("Delete user with Id {}", idx); 

     redirectAttributes.addFlashAttribute("css", "Success"); 
     redirectAttributes.addFlashAttribute("msg", "The user is deleted"); 

     // delete the user 
     userService.delete(idx); 
     return "redirect:/users/"; 
    } 

我用@ResponseStatus(value = HttpStatus.OK)的建議因爲我正在從控制器返回302，並在Chrome開發工具的網絡部分進行了驗證。