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

〇、使用框架与技术

  后: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>

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

时间: 2024-10-10 16:06:40

以form表单重用方式进行数据列表行删除的相关文章

ANDROID使用MULTIPARTENTITYBUILDER实现类似FORM表单提交方式的文件上传

最近在做 Android 端文件上传,要求采用 form 表单的方式提交,项目使用的 afinal 框架有文件上传功能,但是始终无法与php写的服务端对接上,无法上传成功.读源码发现:afinal 使用了某大神写的 MultipartEntity.java 生成 form 表单内容,然而生成的内容格式不够标准,而且还存在诸多问题,如:首先将所有文件读入到内存,再生成字节流写入到 socket.那么问题来了:如果是几百MB的文件怎么办? 几番搜索,受到 这篇文章(已被我转载,但是示例代码已过期)的

如何把整张表格的数据通过form表单的方式传回后台

开发背景: 前段时间遇到这么一个需求,就是把一整张表格的数据存储在数据库中,之后再渲染在页面中,还可以进行重新编辑. 例如下边的课程表(为了方便,所以都是软件工程). 我也是经过一段时间的思考,才实现了整个功能. 思考过程: 思考过程中,想过用ajax,感觉还是太麻烦了,放弃. 第二个,是找网上现成的接口,比如表单大师之类的...但是找来找去找不到,没有符合要求的接口.放弃. 第三个,想到python万能的包来实现,还是相信python的包是万能的23333,百度来百度去,找不到.放弃. 最后还

Form表单Ajax系列化提交数据

页面上有一个商品的颜色尺码二维输入框,输入完毕之后需要把数据进行提交,点击立即购买则进行页面的跳转,通过form表单将数据提交到后台,而点击添加到购物车的话,则会通过ajax进行数据的提交,页面不进行跳转.前台样式: 下面是form表单: <form id="cartForm" action="${ctx}/cart/save" method="post"> <div class="product-page-optio

form表单提交方式

无刷新页面提交表单 表单可实现无刷新页面提交,无需页面跳转,如下,通过一个隐藏的iframe实现,form表单的target设置为iframe的name名称,form提交目标位当前页面iframe则不会刷新页面 <form action="/url.do" method="post" target="targetIfr"> <input type="text" name="name"/&g

学习java前端 两种form表单提交方式

第一种:原生方式 注意点:button标签的style为submit <form action="/trans/doTrans.do" method="post"> 转出卡号:${cardNo} <br> 转出卡号余额:${balance}元 <br> <br> 转入卡号:<input name="checkInCardNo" type="text"> <br&

form表单转换为Json字符串数据

https://github.com/marioizquierdo/jquery.serializeJSON 效果图 加载使用 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.serializejson.js"></script>

nodejs-http 对form表单上传文件数据的解析过程

前几天碰到了一个需求,允许接收前端用户上传的文件. 当时为了解决问题索性就上github搜了下,找了一个基于nodejs的开发插件. 后来功能实现后觉得意犹未尽,于是自己想试试去写一个类似功能的插件,方便以后拓展,然后就这么开始了. 先来说说应用层的http,数据从前端是怎么被它包装然后传到服务器的. 我们可以在浏览器中查看我们发一个请求的时候包什么格式的,例如我们访问百度时得到的请求包内容: Remote Address:180.97.33.107:443 Request URL:https:

C++用libcurl通过HTTP以表单的方式Post数据到服务器

POST字符串 #include <stdio.h> #include <curl/curl.h> int main(void) { CURL* curl = NULL; CURLcode res; curl = curl_easy_init(); if(curl == NULL) { return CURLE_FAILED_INIT; } struct curl_slist* headerlist = NULL; // 设置表头,表头内容可能不同 headerlist = cur

[oldboy-django][2深入django]form表单clean_xx, clean完成数据验证+ form错误信息

form后台生成form里面的Input标签,以及设置Input的属性 # 需求 后台生成form里面的input标签,并设置input标签的属性, class RegisterForm(Form): email = fields.EmailField() password = fields.CharField() password2 = fields.CharField() code = fields.CharField() avatar = fields.FileField(widget=w