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

最新推荐文章于 2023-06-07 17:30:11 发布

飞滕人生TYF

最新推荐文章于 2023-06-07 17:30:11 发布

阅读量1k

点赞数 1

文章标签： servlet java 前端

本文链接：https://blog.csdn.net/T_Y_F_/article/details/130754778

版权

文章介绍了如何在HTML表单中模拟DELETE请求，通过添加隐藏字段`_method`并设置值为`delete`，然后在后端使用如Spring的HiddenHttpMethodFilter来转换请求方法，从而实现表单的DELETE操作。

摘要由CSDN通过智能技术生成

问题

对于表单（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>
<!-- 作用：通过超链接控制表单的提交，将post请求转换为delete请求 -->
<form id="delete_form" method="post" th:action="@{/clothing_classification/del}">
    <!-- HiddenHttpMethodFilter要求：必须传输_method请求参数，并且值为最终的请求方式 -->
    <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），以便后端能够正确处理请求。