码迷,mamicode.com
首页 > 其他好文 > 详细

以form表单重用方式进行数据列表行删除

时间:2020-01-29 01:06:21      阅读:92      评论:0      收藏:0      [点我收藏+]

标签:服务端   注意   数据库   request   删除按钮   pen   using   UNC   this   

〇、使用框架与技术

  后:Java、Spring Boot;

  前:JQuery。

 

一、需求

  技术图片

 

  1.当我们在页面点击每行的删除按钮时,需要服务端进行数据库操作,此时得通过form表单向服务端提交一个http请求。

  2.我们当然可以把整个列表套在一个form表单里。但又由于某些原因,不能把列表套在form表单中。

  3.并且我们又不想把form表单一个个写在每行的删除按钮下。

 

二、解决

  利用JQuery按钮点击事件使得form表单重用。

  1.写一个form表单(注意要有id)

1     <!--
2        this form is using to submit request of delete through js function
3     -->
4      <form id="deleteEmpForm" method="post">
5       
6      </form>

  2.每个删除按钮的点击事件

  其中deleteUri为请求uri(为了包含所删除数据的id),该属性值从删除按钮获取(以下代码中的this指的是所点击的按钮)。

1         <script>
2             //delete data event
3             $(".deleteBtn").click(function () {
4                 //append uri of request dynamically
5                 $("#deleteEmpForm").attr("action",$(this).attr("deleteUri")).submit();
6                 return false;
7             })
8             
9         </script>

 

以form表单重用方式进行数据列表行删除

标签:服务端   注意   数据库   request   删除按钮   pen   using   UNC   this   

原文地址:https://www.cnblogs.com/Drajun/p/12239227.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!