spring MVC 后端 接收 前端 批量添加的数据(简单示例)
2024-10-02 10:52:00
第一种方式:(使用ajax的方式)
前端代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script>
<table>
<thead>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>学历</th>
<th>增加</th>
<th>移除</th>
</thead>
<tbody id="data1">
<tr>
<td><input type="text" name="empId"></td>
<td><input type="text" name="empName"></td>
<td>
<select name="empSex">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td>
<select name="eduEducation">
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</td>
<td><input type="button" onclick="addElement(this);" value="+"></td>
<td><input type="button" value="-" onclick="delElement(this)"></td>
</tr>
</tbody>
</table>
<p><input type="button" id="btn_add" value="批量添加"></p>
</body>
<script> //批量添加
$("#btn_add").click(function () {
var data=[];
//循环tbody里面所有的tr,并取出每行相对的值,填充到数组中
$("#data1 tr").each(function (index,obj) {
data.push({
empId:$("input[name='empId']",obj).val(),
empName:$("input[name='empName']",obj).val(),
empSexual:$("select[name='empSexual'] option:selected",obj).val(),
eduEducation:$("select[name='eduEducation'] option:selected",obj).val()
})
})
//发起post请求
$.post({
url:"",
contentType:"application/json",
data:JSON.stringify(data),//将对象转为字符
success:function (text) {
alert(text.msg);
}
}); })
//复制tr节点的内容
function addElement(x){
$(x).parents("tr").clone().appendTo($("#data1"));
}
//移除tr节点
function delElement(x){
$(x).parents("tr").remove();
} </script>
</html>
后端代码:
//访问test页面
@RequestMapping(path="/c",method = RequestMethod.GET)
public String test1(){
return "test1";
} //接收test页面的字符数组
@RequestMapping(path = "/c",method = RequestMethod.POST,produces = "application/json;charset=utf-8")
@ResponseBody
public String Receive(@RequestBody List<Employee> list){ //Employee可以改为Object
for (Employee employee : list) {
System.out.println(employee);
}
return "{\"msg\":\"添加成功\"}";
}
实体类
package com.oukele.model; import java.math.BigDecimal; public class Employee {
private String empId; private String empName; private String empSexual; private String eduEducation; public String getEmpId() {
return empId;
} public void setEmpId(String empId) {
this.empId = empId == null ? null : empId.trim();
} public String getEmpName() {
return empName;
} public void setEmpName(String empName) {
this.empName = empName == null ? null : empName.trim();
} public String getEmpSexual() {
return empSexual;
} public void setEmpSexual(String empSexual) {
this.empSexual = empSexual == null ? null : empSexual.trim();
} public String getEduEducation() {
return eduEducation;
} public void setEduEducation(String eduEducation) {
this.eduEducation = eduEducation == null ? null : eduEducation.trim();
} @Override
public String toString() {
return "Employee{" +
"empId='" + empId + '\'' +
", empName='" + empName + '\'' +
", empSexual='" + empSexual + '\'' +
", eduEducation='" + eduEducation + '\'' +
'}';
}
}
演示:
后台接收后打印的值:
第二种方式:(使用form表单)
创建一个实体类 将Employee封装起来
FormBean
package com.oukele.model; import java.util.List; public class FormBean {
private List<Employee> employeeList; public List<Employee> getEmployeeList() {
return employeeList;
} public void setEmployeeList(List<Employee> employeeList) {
this.employeeList = employeeList;
} }
前端代码:
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<body>
<script src="${pageScope.request.ContextPath}/js/jquery-3.3.1.min.js"></script>
<form action="/zhoumo/c" method="post" id="myform">
<table>
<thead>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>学历</th>
<th>增加</th>
<th>移除</th>
</thead>
<tbody id="data1">
<tr>
<td><input type="text" name="empId"></td>
<td><input type="text" name="empName"></td>
<td>
<select name="empSexual">
<option value="男">男</option>
<option value="女">女</option>
</select>
</td>
<td>
<select name="eduEducation">
<option value="本科">本科</option>
<option value="硕士">硕士</option>
<option value="博士">博士</option>
</select>
</td>
<td><input type="button" onclick="addElement(this);" value="+"></td>
<td><input type="button" value="-" onclick="delElement(this)"></td>
</tr>
</tbody>
</table>
</form>
<p><input type="button" id="btn_add" value="批量添加"></p>
</body>
<script> $("#btn_add").click(function () {
//获取行
var rows = $("#data1 tr");
//循环每一行
$(rows).each(function (index,obj) {
//将每一行中的 input[type='text'],select的对象取出,再进行一次循环
$("input[type='text'],select",obj).each(function (i,o) {
//当前对象 添加 name 属性值 name =employeeList[索引].对应的属性值
$(o).attr("name","employeeList["+index+"]."+$(o).attr("name"));
})
});
//提交
$("#myform").submit(); }) //复制tr节点的内容
function addElement(x){
$(x).parents("tr").clone().appendTo($("#data1"));
}
//移除tr节点
function delElement(x){
$(x).parents("tr").remove();
} </script>
</html>
后台代码:
//访问test页面
@RequestMapping(path="/c",method = RequestMethod.GET)
public String test1(){
return "test1";
}//接收test页面的form传递过来的值
@RequestMapping(path = "/c",method = RequestMethod.POST)
public String Receive1(FormBean formBean){
for (Employee employee : formBean.getEmployeeList()) {
System.out.println(employee);
}
//重定向
return "redirect:/zhoumo/c";
}
演示:
前端 form表单 提交
后端:
后台还有Map接收的方式,不过我忘了。有点尴尬了。希望路过的大佬有想法能贴出来一下,一起学习(本人菜鸟一枚)>..<
最新文章
- 10gRAC vip启动报错CRS-1006 CRS-0215
- SSE指令集优化学习:双线性插值
- 修改PHP上传文件大小限制的方法
- jquery图片时钟
- Linux(Centos)下jdbc连接oracle速度超慢的问题
- select2取值报错,Failed to read the &#39;selectionDirection&#39; property from &#39;HTMLInputElement&#39;: The input element&#39;s type (&#39;hidden&#39;) does not support selection.
- angular-ui-router状态不变刷新页面
- 直播开始:&#39;云榨汁机&#39;诞生记--聊聊JavaScript中的&#39;业务建模&#39;
- linux MySQL安装配置
- Redis操作字符串工具类封装,Redis工具类封装
- fopen\fread\fwrite\fscanf\fprintf\fseek\feof\rewind\fgets\fputc等系列函数使用总结
- (原创)(三)机器学习笔记之Scikit Learn的线性回归模型初探
- 搭建Vue.js开发环境(window10)
- python中报错";json.decoder.JSONDecodeError: Expecting value:";的解决
- Data Lake Analytics的Geospatial分析函数
- MySQL存储过程(PROCEDURE)(一)
- jetbrains 系列 webstorm、IntelliJ Idea 免费激活方法免激活码
- iOS 开发 nonatomic 和 atomic
- WeRun is mini-app
- 指定分隔符连接数组元素join()
热门文章
- git 提交项目到远程仓库,简单实现忽略 node_modules文件
- 应用安全 - JavaScript - 框架 - Jquery - 漏洞 - 汇总
- 解决Wamp的 Error D:\wamp or PHP path 错误
- java中连接数据库的步骤
- ASP.NET Core WebApi使用Swagger
- 利用docker搭建本地私有镜像仓库
- Hive怎么使用远程连接
- ABC133F Small Products
- 面试40-一个数组,有2个数字出现奇数次,其余都是偶数次,求这两个数字O(n) O(1)
- EJB通过注解方式注入并使用其它EJB或者服务、配置JBoss数据源