删除表单（form）元素中的某一个数据项操作实现

分手后的思念是犯贱 2023-09-27 23:38 8阅读 0赞

## 问题 ##

对于表单（form）元素，只支持POST请求。若是需要删除表单（form）元素中的某一个数据项，最为严谨的方式是采用POST请求， 对于表单元素，如何转换为DELETE请求

### 详细问题 ###

对于表单元素，如何由转换为POST请求转换为DELETE请求

### 解决方案 ###

前端代码

<!DOCTYPE html>
    <html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <script type="text/javaScript" src="../../js/jquery-3.6.4.min.js " th:src="@{/js/jquery-3.6.4.min.js}"></script>
    </head>
    <body>
    
    <table th:border="1" th:cellspacing="0" th:cellpadding="10" style="text-align: center;">
        <thead>
        <th>类别id</th>
        </thead>
        <tbody>
        <tr th:each="clothingClassification:${clothingClassifications}">
            <td th:text="${clothingClassification.getId()}"></td>
            <td>
                <a href="#" th:onclick="testJson1([[${clothingClassification.getId()}]])">删除类别</a>
            </td>
        </tr>
        </tbody>
    </table>
    <br>
    
    <form id="delete_form" method="post" th:action="@{/clothing_classification/del}">
        
        <input type="hidden" name="_method" value="delete"/>
        <input type="hidden" name="id" th:id="form-id"/>
    </form>
    
    <script type="text/javaScript">
        function testJson1(id) {
          
        	// 使用confirm函数显示一个确认对话框，询问用户是否确认删除指定ID的商品。用户可以选择"确定"或"取消"。
            var b = confirm("确认删除id 为" + id + " 的商品？");
            // 检查用户是否点击了确认按钮。
            if (b) {
          
            	// 获取页面中ID为"delete_form"的表单。
                var delete_form = $("#delete_form");
                // 将ID设置为表单中ID为"form-id"的隐藏字段的值。
                $("#form-id").val(id);
                // 提交表单，触发删除商品的操作。
                delete_form.submit();
            }
        }
    </script>
    </body>
    </html>

后端接口

package com.haut.controller;
    
    import com.haut.service.ClothingClassificationService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.RequestMethod;
    
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    import java.io.IOException;
    
    @Controller
    @RequestMapping("/clothing_classification")
    public class ClothingClassificationController {
        
        @Autowired
        private ClothingClassificationService clothingClassificationService;
    
        @RequestMapping(value = "/del", method = RequestMethod.DELETE )
        public void delClothingInfoById(Long id, HttpServletRequest request, HttpServletResponse response) throws IOException {
        
            clothingClassificationService.delClothingClassificationById(id);
            response.sendRedirect(request.getContextPath() + "/clothing_classification/get");
        }
    
    }

### 原因 ###

是由于HTML表单元素默认只支持GET和POST请求，无法直接使用DELETE请求。然而，在某些情况下，我们希望使用DELETE请求来执行特定的操作，例如删除数据项。  
为了实现将表单元素的请求方法从POST转换为DELETE，我们需要采取以下步骤：  
（1）添加隐藏字段：在HTML表单元素中添加一个隐藏字段，用于指示将该请求转换为DELETE请求。隐藏字段的名称可以是任意值，但通常使用\_method作为约定俗成的字段名。  
（2）设置隐藏字段值：将隐藏字段的值设置为"delete"，以表示该表单的请求方法应为DELETE请求。这样，在提交表单时，会将隐藏字段的值一同发送给服务器，用于请求方法的识别和转换。  
（3）后端接口处理：在后端接收该请求的控制器方法上，使用@RequestMapping注解指定该方法的请求方法为DELETE。这样，当接收到经过转换的请求时，后端会正确地将其映射到对应的方法进行处理。

解决方案的关键在于添加隐藏字段并将其值设置为"delete"，这样在表单提交时，就会将请求方法转换为DELETE。后端接口根据请求方法的设置，正确地处理DELETE请求并执行相应的操作。

需要注意的是，实际应用中，可能需要使用特定的框架或库来处理请求方法的转换，例如Spring框架中的HiddenHttpMethodFilter过滤器。该过滤器会检查请求中的隐藏字段，并根据其值自动将请求方法转换为相应的方法（例如POST转换为DELETE），以便后端能够正确处理请求。

### 参考文献 ###

chatgpt问答

![在这里插入图片描述][9cb4cb80a18345158f8a69e2f196e5b9.png]

[9cb4cb80a18345158f8a69e2f196e5b9.png]: https://img-blog.csdnimg.cn/9cb4cb80a18345158f8a69e2f196e5b9.png