同步请求的get请求转delete请求。添加修改共用一个表单。

最新推荐文章于 2022-09-21 20:09:50 发布

BigDevil_

最新推荐文章于 2022-09-21 20:09:50 发布

阅读量395

点赞数

分类专栏： SSM学习前端学习

本文链接：https://blog.csdn.net/BigDevil_/article/details/104687247

版权

前端学习同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

SSM学习

3 篇文章 0 订阅

订阅专栏

文章目录

同步请求的get请求转delete请求

思路：
首先，get不能转delete，但是post可以转delete。
所以要先将get转成post，然后再转delete

需要一个隐藏的form，里面有添加表单项：_method=delete
且表单的请求方法是post。
a标签是get请求，然后，通过a标签点击事件，获取到a的href值，并动态给form的action赋值。然后提交这个表单。

return false；取消a标签的默认行为。很重要，很关键。

$(function(){
	 //1.jquery 1.简化代码 2.jquery解决了部分浏览器兼容性 3.当为一组元素绑定事件的时候，就相当于为这一组元素中的每个元素都绑定了一个事件
	 $("a[id ^= delete_]").click(function(){
		 var href = $(this).attr("href"); 
		 var name=$(this).parent().parent().find("td:eq(1)").text();
		 if(confirm("您确定要删除<<"+name+">>么？")){
			 $("#form01").attr("action",href).submit();
		 }
		 
		 //取消超链接的默认行为
		 return false;
	 });
 });

<form id="form01" action="" method="post">
       <input type="hidden" name="_method" value="delete">
</form>
   
<table border="1px" align="center" width="80%" cellspacing="0px" cellpadding="10px">
     <tr>
       <th>产品ID</th>
       <th>产品名称</th>
       <th>产品价格</th>
       <th>产品颜色</th>
       <th>产品描述</th>
       <th >操作</th>
     </tr>
     <c:forEach  items="${products}" var="prod">
       <tr>
          <td>${prod.pid }</td>
          <td>${prod.pname }</td>
          <td>${prod.price }</td>
          <td>${prod.color }</td>
          <td>${prod.description }</td>
          <td><a id="delete_${prod.pid}" href="${pageContext.request.contextPath}/product/del/${prod.pid}">删除</a> | <a href="${pageContext.request.contextPath}/product/edit/${prod.pid}">编辑</a></td>
       </tr>
     </c:forEach>
     <tr>
       <td colspan="6"><a href="${pageContext.request.contextPath}/add">添加</a></td>
     </tr>
  </table>

前提：一定要加 post转put和delete的过滤器

在web.xml中添加

<!-- post转put和delete -->
    <filter>
  	<filter-name>hiddenHttpMethodFilter</filter-name>
  	<filter-class>org.springframework.web.filter.HiddenHttpMethodFilter</filter-class>
  </filter>
  <filter-mapping>
  	<filter-name>hiddenHttpMethodFilter</filter-name>
  	<url-pattern>/*</url-pattern>
  </filter-mapping>

添加和修改共用一个表单。

即：
修改是要数据回显的，根据id获取到了bean之后，会响应给表单。
这是判断如果返回数据有bean，就表示是修改。显示修改按钮，添加隐藏域的id和_method
如果为空表示是添加表单。

<body>
    <form action="${pageContext.request.contextPath}/product/save" method="post">
    <c:if test="${!empty product}">
       <input type="hidden" name="pid" value="${product.pid}">
       <input type="hidden" name="_method" value="put">
    </c:if>
                 产品名称：<input type="text" name="pname" value="${product.pname }"><br>
                 产品价格：<input type="text" name="price" value="${product.price }"><br>
                 产品颜色：<input type="text" name="color" value="${product.color }"><br>
                 产品描述：<input type="text" name="description" value="${product.description }"><br>
        <c:if test="${!empty product}">
           <input type="submit" value="修改">
        </c:if>
        <c:if test="${empty product}">
           <input type="submit" value="添加">
        </c:if>
      
    </form>
</body>