0

我有一个使用 Spring 的项目，我需要使用 jQuery 创建管理页面。我有一个包含所有用户的表，我有一个“删除”按钮。当我点击它时，用户应该从数据库中删除。没有脚本一切正常，但使用脚本我无法弄清楚如何从数据库中删除用户以及如何将用户登录信息发送到控制器。我只能从表中删除行，但是当我刷新页面时，用户仍然存在。谁能帮助我如何在脚本中从数据库中删除用户？

桌子

<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>
$(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>
4

3 回答 3

3

这对我有用：

表（检查“删除”链接）

<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>
$(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>
于 2013-08-20T09:48:42.713 回答
0

在您的代码中，您没有调用所需的 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");
            }
        });
    });
于 2013-08-19T15:29:18.327 回答
0

如果您想使用 发送数据jQuery，我建议使用AJAXwith 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。

于 2013-08-19T15:33:31.663 回答