如何在POST / DELETE上将JSP forEach索引提取到Controller?

时间:2018-01-27 21:27:28

标签: java spring jsp

我有一个动态创建行的jsp表 - 每行绑定到DAO。每一行还有一个按钮,可以提供从DB中删除DAO的可用性,当然也可以从表本身中删除。

我的问题是,如何通知控制器哪个DAO被删除?

我的想法是将varStatus索引提取到控制器并以某种方式使用@ModelAttribute(“游戏”)找到它,但老实说,我不知道如何将此索引传递给控制器​​。我知道模型是由控制器生成的,并传递给JSP,它从模型中提取数据并呈现它,但我在这里做的显然是一个POST / DELETE方法。

我对该jsp的控制器映射:

@RequestMapping(value="/deleteGame", method=RequestMethod.GET)
public String getDeleteGame (ModelMap model) {
    List<Game> myGames = gamesService.fetchById();
    model.addAttribute("games", myGames);
    return "deleteGame";
}

@RequestMapping(value="/deleteGame", method=RequestMethod.POST)
public String postDeleteGame (ModelMap model) {
    return "deleteGame";
}

这是我的参考JSP表:

<div class="table-responsive" id="tableWithBg">
                    <table class = "table-hover">
                        <thead>
                            <tr>
                                <th class="col-md-2">TITLE</th>
                                <th class="col-md-2">TYPE</th>
                                <th class="col-md-2">MODE</th>
                                <th class="col-md-2">PRODUCER</th>
                                <th class="col-md-3">OPINION</th>
                                <th class="col-md-1">DELETE</th>
                            </tr>
                        </thead>
                        <tbody>
                            <c:forEach items="${games}" var="game" varStatus="loopIndex">
                                <tr>
                                    <td>${game.title}</td>
                                    <td>${game.type}</td>   
                                    <td>${game.mode}</td>
                                    <td>${game.producent}</td>
                                    <td>${game.opinion}</td>
                                    <td>
                                        <button type="button" action="delete" onclick="getCategoryIndex(${loopIndex.index})" class="btn btn-danger">
                                            <strong>X</strong>
                                        </button>
                                    </td>
                                </tr>
                            </c:forEach>                                                            
                        </tbody>
                    </table>                
                </div>

1 个答案:

答案 0 :(得分:0)

首先,在所有删除按钮中添加公共类(如class =&#34; js-delete-game&#34;),以检查触发了哪个按钮。 data-game-id="${game.id}"是游戏的唯一ID(假设您的唯一ID是id)以移除适当的游戏。

<button data-game-id="${game.id}" type="button" class="js-delete-game" id="js-delete-game${game.id}">
  <strong>X</strong>
</button>

用于检查点击了哪个按钮的事件处理程序以及用于删除游戏的ajax方法。

//<table id="game-list">
$("#game-list").on('click','.js-delete-game',function(event){
    var id = $(event.target).data('gameId'); //data-game-id Get your unique game ID from the clicked button.
    var data = JSON.stringify({"id":id});
    var rowId= "#"+event.target.id; //get button id from clicked button and create selector
    $.ajax({
    type : "DELETE",
    url : "${pageContext.request.contextPath}/deleteGame",
    contentType: "application/json",
    data : data,
    success: function(data){
       //remove row deleted on page without refreshing.
       $(rowId).closest('tr').remove();
    }
    });
});

最后更改您的映射方法如下:

@RequestMapping(value = "/deleteGame" , method = RequestMethod.DELETE)
@ResponseBody
public void deleteGameById(@RequestBody Map<String, String> id) {
  //your logic maybe different  
  gamesService.remove(id.get("id")); 
}

简单地说,如果您点击删除按钮,游戏的唯一ID将发送到服务器。现在你可以在服务器端获取id并按id删除游戏。