如何在 POST/DELETE 上将 JSP forEach 索引提取到控制器？答案

【问题标题】：How to extract JSP forEach index to Controller on POST/DELETE?如何在 POST/DELETE 上将 JSP forEach 索引提取到控制器？
【发布时间】：2018-01-27 21:27:27
【问题描述】：

我有一个动态创建行的 jsp 表 - 每行都绑定到 DAO。每行还有一个按钮，该按钮应该提供从数据库中删除该 DAO 的可用性，当然还有从表本身中删除该 DAO。

我的问题是，我如何通知控制器究竟是哪个 DAO 被调用删除？

我的想法是将 varStatus 索引提取到控制器并以某种方式使用@ModelAttribute（“游戏”）找到它，但老实说，我不知道如何将此索引传递给控制器。我知道模型是由控制器生成并传递给 JSP，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>

【问题讨论】：

标签： java spring jsp

【解决方案1】：

首先，将公共类（如 class="js-delete-game"）添加到所有删除按钮，以检查哪个按钮被触发。 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 删除游戏。

【讨论】：